Add rich text field

Author: janslifka

app-wizard/elm/Wizard/Components/Questionnaire2/Components/QuestionnaireContent.elm

@@ -19,6 +19,7 @@ import Common.Components.DatePicker as DatePicker
 import Common.Components.FileDownloader as FileDownloader
 import Common.Components.Flash as Flash
 import Common.Components.FontAwesome exposing (fa, faAdd, faDelete, faError, faInfo, faKmQuestion, faNext, faPrev, faQuestionnaireClearAnswer, faQuestionnaireComments, faQuestionnaireCopyLink, faQuestionnaireDesirable, faQuestionnaireExperts, faQuestionnaireFollowUpsIndication, faQuestionnaireItemCollapse, faQuestionnaireItemCollapseAll, faQuestionnaireItemExpand, faQuestionnaireItemExpandAll, faQuestionnaireItemMoveDown, faQuestionnaireItemMoveUp, faQuestionnaireResourcePageReferences, faQuestionnaireUrlReferences, faRemove, faSearch, faSpinner)
+import Common.Components.MarkdownEditor as MarkdownEditor
 import Common.Components.Modal as Modal
 import Common.Components.Tooltip exposing (tooltip, tooltipLeft, tooltipRight)
 import Common.Ports.Copy as Copy
@@ -76,7 +77,6 @@ import Wizard.Api.Models.TypeHintRequest as TypeHintRequest
 import Wizard.Api.Models.User as User
 import Wizard.Api.ProjectFiles as ProjectFilesApi
 import Wizard.Api.TypeHints as TypeHintsApi
-import Wizard.Components.Html exposing (resizableTextarea)
 import Wizard.Components.Questionnaire2.Components.FileUploadModal as FileUploadModal
 import Wizard.Components.Questionnaire2.QuestionViewFlags as QuestionViewFlags
 import Wizard.Components.Questionnaire2.QuestionnaireRightPanel as QuestionnaireRightPanel exposing (PluginQuestionActionData, QuestionnaireRightPanel)
@@ -1668,8 +1668,18 @@ viewQuestionValueLazy locale pluginActions questionNodeData questionViewFlags re
                     ]
 
                 Just QuestionValueType.TextQuestionValueType ->
-                    [ resizableTextarea 3 replyValue (defaultAttrs ++ extraAttrs) [] ]
+                    if isReadOnly then
+                        [ Markdown.toHtml [ class "form-control bg-light text-secondary" ] replyValue ]
 
+                    else
+                        [ MarkdownEditor.markdownEditor
+                            [ MarkdownEditor.value replyValue
+                            , MarkdownEditor.onChange toMsg
+                            , MarkdownEditor.labels locale
+                            ]
+                        ]
+
+                --[ resizableTextarea 3 replyValue (defaultAttrs ++ extraAttrs) [] ]
                 Just QuestionValueType.ColorQuestionValueType ->
                     [ input (type_ "color" :: defaultAttrs ++ extraAttrs) []
                     , warningView RegexPatterns.color (gettext "This is not a valid color." locale)

app-wizard/elm/Wizard/Pages/KMEditor/Editor/Components/KMEditor.elm

@@ -139,7 +139,7 @@ import Wizard.Utils.WizardGuideLinks as WizardGuideLinks
 
 type alias Model =
     { splitPane : SplitPane.State
-    , markdownPreviews : List String
+    , editorPreviews : List String
     , reorderableStates : Dict String Reorderable.State
     , deleteModalState : DeleteModalState
     , moveModalState : Maybe MoveModalState
@@ -191,7 +191,7 @@ type alias CurlImportModalState =
 initialModel : Model
 initialModel =
     { splitPane = SplitPane.init SplitPane.Horizontal |> SplitPane.configureSplitter (SplitPane.percentage 0.2 (Just ( 0.05, 0.7 )))
-    , markdownPreviews = []
+    , editorPreviews = []
     , reorderableStates = Dict.empty
     , deleteModalState = Closed
     , moveModalState = Nothing
@@ -263,10 +263,10 @@ update appState cfg msg ( editorContext, model ) =
     let
         showHideMarkdownPreview visible field m =
             if visible then
-                { m | markdownPreviews = field :: m.markdownPreviews }
+                { m | editorPreviews = field :: m.editorPreviews }
 
             else
-                { m | markdownPreviews = List.filter ((/=) field) m.markdownPreviews }
+                { m | editorPreviews = List.filter ((/=) field) m.editorPreviews }
     in
     case msg of
         SplitPaneMsg splitPaneMsg ->
@@ -478,7 +478,7 @@ update appState cfg msg ( editorContext, model ) =
                         newModel =
                             { model
                                 | curlImportModalState = { integrationUuid = Nothing, curlString = "" }
-                                , markdownPreviews = (integrationUuid ++ ":requestAdvancedConfiguration") :: model.markdownPreviews
+                                , editorPreviews = (integrationUuid ++ ":requestAdvancedConfiguration") :: model.editorPreviews
                             }
                     in
                     ( editorContext, newModel, Task.dispatch setRequestBodyMsg )
@@ -1027,7 +1027,6 @@ viewChapterEditor { appState, wrapMsg, eventMsg, model, editorContext } chapter
                 , onInput = createEditEvent setText << String.toMaybe
                 , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                 , entityUuid = chapter.uuid
-                , markdownPreviews = model.markdownPreviews
                 }
 
         questionsInput =
@@ -1258,7 +1257,6 @@ viewQuestionEditor { appState, wrapMsg, eventMsg, model, editorContext } questio
                 , onInput = createEditEvent setText setText setText setText setText setText setText << String.toMaybe
                 , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                 , entityUuid = questionUuid
-                , markdownPreviews = model.markdownPreviews
                 }
 
         requiredPhaseUuidInput =
@@ -1689,7 +1687,7 @@ viewQuestionEditor { appState, wrapMsg, eventMsg, model, editorContext } questio
 
 
 viewMetricEditor : EditorConfig msg -> Metric -> Html msg
-viewMetricEditor { appState, wrapMsg, eventMsg, model, editorContext } metric =
+viewMetricEditor { appState, wrapMsg, eventMsg, editorContext } metric =
     let
         parentUuid =
             EditorContext.getParentUuid metric.uuid editorContext
@@ -1738,7 +1736,6 @@ viewMetricEditor { appState, wrapMsg, eventMsg, model, editorContext } metric =
                 , onInput = createEditEvent setDescription << String.toMaybe
                 , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                 , entityUuid = metric.uuid
-                , markdownPreviews = model.markdownPreviews
                 }
 
         annotationsInput =
@@ -2121,7 +2118,7 @@ viewIntegrationEditorApi config parentUuid integrationUuid integration data =
                 { identifier = "advancedConfiguration"
                 , openLabel = gettext "Advanced Integration Configuration" appState.locale
                 , content = allowCustomReplyGroup ++ variablesGroup ++ secretsGroup
-                , markdownPreviews = model.markdownPreviews
+                , markdownPreviews = model.editorPreviews
                 , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                 , entityUuid = integrationUuid
                 }
@@ -2156,7 +2153,7 @@ viewIntegrationEditorApi config parentUuid integrationUuid integration data =
                         { identifier = "requestAdvancedConfiguration"
                         , openLabel = gettext "Advanced Request Configuration" appState.locale
                         , content = requestAdvancedConfigurationContent
-                        , markdownPreviews = model.markdownPreviews
+                        , markdownPreviews = model.editorPreviews
                         , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                         , entityUuid = integrationUuid
                         }
@@ -2252,7 +2249,7 @@ viewIntegrationEditorApi config parentUuid integrationUuid integration data =
                                         { identifier = "requestDetails"
                                         , openLabel = gettext "Request Details" appState.locale
                                         , content = requestDetailsGroupContent
-                                        , markdownPreviews = model.markdownPreviews
+                                        , markdownPreviews = model.editorPreviews
                                         , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                                         , entityUuid = integrationUuid
                                         }
@@ -2441,7 +2438,7 @@ viewIntegrationEditorApi config parentUuid integrationUuid integration data =
                                         , showPreviewMsg = wrapMsg << TestIntegrationPreview integrationUuid
                                         , showTemplateMsg = wrapMsg << ShowHideMarkdownPreview False
                                         , entityUuid = integrationUuid
-                                        , markdownPreviews = model.markdownPreviews
+                                        , editorPreviews = model.editorPreviews
                                         , integrationTestPreviews = model.integrationTestPreviews
                                         , cursorPositions = model.cursorPositions
                                         , fieldSuggestions = TypeHintTestResponse.getSuggestedItemProperties (String.fromMaybe data.responseListField) responseData
@@ -2459,7 +2456,7 @@ viewIntegrationEditorApi config parentUuid integrationUuid integration data =
                                         , showPreviewMsg = wrapMsg << TestIntegrationPreview integrationUuid
                                         , showTemplateMsg = wrapMsg << ShowHideMarkdownPreview False
                                         , entityUuid = integrationUuid
-                                        , markdownPreviews = model.markdownPreviews
+                                        , editorPreviews = model.editorPreviews
                                         , integrationTestPreviews = model.integrationTestPreviews
                                         , cursorPositions = model.cursorPositions
                                         , fieldSuggestions = TypeHintTestResponse.getSuggestedItemProperties (String.fromMaybe data.responseListField) responseData
@@ -2472,7 +2469,7 @@ viewIntegrationEditorApi config parentUuid integrationUuid integration data =
                                         { identifier = "responseAdvancedConfiguration"
                                         , openLabel = gettext "Advanced Response Configuration" appState.locale
                                         , content = responseAdvancedConfigurationContent
-                                        , markdownPreviews = model.markdownPreviews
+                                        , markdownPreviews = model.editorPreviews
                                         , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                                         , entityUuid = integrationUuid
                                         }
@@ -2676,7 +2673,6 @@ viewAnswerEditor { appState, wrapMsg, eventMsg, model, editorContext } answer =
                 , onInput = createEditEvent setAdvice << String.toMaybe
                 , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                 , entityUuid = answer.uuid
-                , markdownPreviews = model.markdownPreviews
                 }
 
         followUpsInput =
@@ -3158,7 +3154,7 @@ viewResourceCollectionEditor { appState, wrapMsg, eventMsg, model, editorContext
 
 
 viewResourcePageEditor : EditorConfig msg -> ResourcePage -> Html msg
-viewResourcePageEditor { appState, wrapMsg, eventMsg, model, editorContext } resourcePage =
+viewResourcePageEditor { appState, wrapMsg, eventMsg, editorContext } resourcePage =
     let
         parentUuid =
             EditorContext.getParentUuid resourcePage.uuid editorContext
@@ -3199,7 +3195,6 @@ viewResourcePageEditor { appState, wrapMsg, eventMsg, model, editorContext } res
                 , onInput = createEditEvent setContent
                 , previewMsg = compose2 wrapMsg ShowHideMarkdownPreview
                 , entityUuid = resourcePage.uuid
-                , markdownPreviews = model.markdownPreviews
                 }
 
         annotationsInput =

app-wizard/elm/Wizard/Pages/KMEditor/Editor/Components/KMEditor/Input.elm

@@ -43,14 +43,15 @@ import ActionResult exposing (ActionResult)
 import Common.Components.ActionResultBlock as ActionResultBlock
 import Common.Components.DatePicker as DatePicker
 import Common.Components.FontAwesome exposing (faAdd, faDelete, fas)
+import Common.Components.MarkdownEditor as MarkdownEditor
 import Common.Components.Tooltip exposing (tooltip, tooltipLeft)
 import Common.Utils.ByteUnits as ByteUnits
 import Common.Utils.Markdown as Markdown
 import Common.Utils.RegexPatterns as RegexPatterns
 import Dict exposing (Dict)
 import Gettext exposing (gettext)
 import Html exposing (Html, a, div, input, label, li, optgroup, option, span, text, ul)
-import Html.Attributes as Attribute exposing (attribute, checked, class, classList, for, href, id, name, placeholder, rows, selected, step, style, target, type_, value)
+import Html.Attributes as Attribute exposing (attribute, checked, class, classList, for, id, name, placeholder, rows, selected, step, style, type_, value)
 import Html.Attributes.Extensions exposing (dataCy)
 import Html.Events exposing (onCheck, onClick, onInput)
 import Html.Events.Extensions exposing (onBlurWithSelection)
@@ -347,62 +348,20 @@ type alias MarkdownInputConfig msg =
     , onInput : String -> msg
     , previewMsg : Bool -> String -> msg
     , entityUuid : String
-    , markdownPreviews : List String
+
+    --, markdownPreviews : List String
     }
 
 
 markdown : AppState -> MarkdownInputConfig msg -> Html msg
 markdown appState config =
-    let
-        fieldIdentifier =
-            createFieldId config.entityUuid config.name
-
-        previewActive =
-            List.member fieldIdentifier config.markdownPreviews
-
-        content =
-            if previewActive then
-                Markdown.toHtml [] config.value
-
-            else
-                Html.textarea
-                    [ class "form-control"
-                    , id config.name
-                    , name config.name
-                    , onInput config.onInput
-                    , value config.value
-                    , rows <| List.length <| String.lines config.value
-                    ]
-                    []
-    in
     div [ class "form-group form-group-markup-editor" ]
         [ label [ for config.name ] [ text config.label ]
-        , div [ class "card" ]
-            [ div [ class "card-header" ]
-                [ ul [ class "nav nav-tabs card-header-tabs" ]
-                    [ li [ class "nav-item" ]
-                        [ a
-                            [ onClick (config.previewMsg False fieldIdentifier)
-                            , class "nav-link"
-                            , classList [ ( "active", not previewActive ) ]
-                            ]
-                            [ text (gettext "Editor" appState.locale) ]
-                        ]
-                    , li [ class "nav-item" ]
-                        [ a
-                            [ onClick (config.previewMsg True fieldIdentifier)
-                            , class "nav-link"
-                            , classList [ ( "active", previewActive ) ]
-                            ]
-                            [ text (gettext "Preview" appState.locale) ]
-                        ]
-                    ]
-                ]
-            , div [ class "card-body" ] [ content ]
-            , div [ class "card-footer text-muted" ]
-                (String.formatHtml (gettext "You can use %s and see the result in the preview tab." appState.locale)
-                    [ a [ href (WizardGuideLinks.markdownCheatsheet appState.guideLinks), target "_blank" ] [ text "Markdown" ] ]
-                )
+        , MarkdownEditor.markdownEditor
+            [ id config.name
+            , MarkdownEditor.value config.value
+            , MarkdownEditor.onChange config.onInput
+            , MarkdownEditor.labels appState.locale
             ]
         ]
 
@@ -420,7 +379,7 @@ type alias ItemTemplateEditorConfig msg =
     , showPreviewMsg : String -> msg
     , showTemplateMsg : String -> msg
     , entityUuid : String
-    , markdownPreviews : List String
+    , editorPreviews : List String
     , integrationTestPreviews : Dict String (ActionResult (List TypeHint))
     , cursorPositions : Dict String ( Int, Int )
     , fieldSuggestions : List String
@@ -435,7 +394,7 @@ itemTemplateEditor appState config =
             createFieldId config.entityUuid config.name
 
         previewActive =
-            List.member fieldIdentifier config.markdownPreviews
+            List.member fieldIdentifier config.editorPreviews
 
         content =
             if previewActive then

app-wizard/index.js

@@ -12,6 +12,7 @@ const program = require('./elm/Wizard.elm')
 require('./js/components/charts')
 require('./js/components/code-editor')
 require('../shared/common/js/components/datetime-pickers')
+require('../shared/common/js/components/markdown-editor')
 require('../shared/common/js/components/shortcut-element')
 
 const cookies = require('./js/ports/cookies')

app-wizard/scss/main.scss

@@ -26,6 +26,7 @@ $fa-font-path: '~@fortawesome/fontawesome-free/webfonts' !default;
 @import '../../shared/common/scss/components/alert';
 @import '../../shared/common/scss/components/guide-link';
 @import '../../shared/common/scss/components/forms';
+@import '../../shared/common/scss/components/markdown-editor';
 @import '../../shared/common/scss/components/modal-news';
 @import '../../shared/common/scss/components/page';
 @import '../../shared/common/scss/components/tooltips';

app-wizard/scss/modules/Shared/_Markdown.scss

@@ -1,7 +1,7 @@
 @import '../../variables';
 @import '../../mixins';
 
-.Markdown {
+.Markdown, .ProseMirror {
     img {
         max-width: 100%;
     }
@@ -71,4 +71,8 @@
             margin-bottom: 0;
         }
     }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
 }