Merge pull request #586 from getformwork/feature/new-editor

New Markdown editor

formwork/src/Panel/Controllers/AbstractController.php

@@ -171,6 +171,29 @@ protected function defaults(): array
                         'seconds' => $this->translations->getCurrent()->getStrings('date.duration.seconds'),
                     ],
                 ],
+                'EditorInput' => [
+                    'labels' => [
+                        'bold'           => $this->translate('panel.editor.bold'),
+                        'italic'         => $this->translate('panel.editor.italic'),
+                        'link'           => $this->translate('panel.editor.link'),
+                        'image'          => $this->translate('panel.editor.image'),
+                        'quote'          => $this->translate('panel.editor.quote'),
+                        'undo'           => $this->translate('panel.editor.undo'),
+                        'redo'           => $this->translate('panel.editor.redo'),
+                        'bulletList'     => $this->translate('panel.editor.bulletList'),
+                        'numberedList'   => $this->translate('panel.editor.numberedList'),
+                        'code'           => $this->translate('panel.editor.code'),
+                        'heading1'       => $this->translate('panel.editor.heading1'),
+                        'heading2'       => $this->translate('panel.editor.heading2'),
+                        'heading3'       => $this->translate('panel.editor.heading3'),
+                        'heading4'       => $this->translate('panel.editor.heading4'),
+                        'heading5'       => $this->translate('panel.editor.heading5'),
+                        'heading6'       => $this->translate('panel.editor.heading6'),
+                        'paragraph'      => $this->translate('panel.editor.paragraph'),
+                        'increaseIndent' => $this->translate('panel.editor.increaseIndent'),
+                        'decreaseIndent' => $this->translate('panel.editor.decreaseIndent'),
+                    ],
+                ],
                 'SelectInput' => [
                     'labels' => [
                         'empty' => $this->translate(('fields.select.empty')),

formwork/src/Panel/Controllers/PagesController.php

@@ -204,6 +204,8 @@ public function edit(RouteParams $routeParams): Response
 
         $this->modal('images');
 
+        $this->modal('link');
+
         $this->modal('changes');
 
         $this->modal('slug');

formwork/src/Panel/Modals/Modal.php

@@ -15,13 +15,17 @@ class Modal implements Arrayable
 {
     use DataArrayable;
 
+    protected string $id;
+
     protected ModalButtonCollection $buttons;
 
     /**
      * @param array<string, mixed> $data
      */
-    public function __construct(protected string $id, array $data, protected Translation $translation, protected FieldFactory $fieldFactory)
+    public function __construct(string $id, array $data, protected Translation $translation, protected FieldFactory $fieldFactory)
     {
+        $this->id = Str::append($id, 'Modal');
+
         $this->data = [...$this->defaults(), ...$data];
 
         if ($this->data['title'] === null) {
@@ -61,7 +65,7 @@ public function fields(): FieldCollection
     {
         $fieldCollection = new FieldCollection();
 
-        $fieldCollection->setMultiple(Arr::map($this->data['fields'] ?? [], fn ($data, $name) => $this->fieldFactory->make($name, $data, $fieldCollection)));
+        $fieldCollection->setMultiple(Arr::map($this->data['fields'] ?? [], fn ($data, $name) => $this->fieldFactory->make($this->id . '.' . $name, $data, $fieldCollection)));
 
         return $fieldCollection;
     }
@@ -74,6 +78,11 @@ public function buttons(): ModalButtonCollection
         return $this->buttons;
     }
 
+    public function hasForm(): bool
+    {
+        return $this->data['form'] ?? false;
+    }
+
     /**
      * @return array<string, mixed>
      */

panel/modals/link.yaml

@@ -0,0 +1,23 @@
+title: '{{panel.modal.link.title}}'
+
+form: false
+
+fields:
+    uri:
+        type: text
+        label: '{{panel.modal.link.uri}}'
+        required: true
+
+buttons:
+    dismiss:
+        action: dismiss
+        icon: times-circle
+        label: '{{panel.modal.action.cancel}}'
+        variant: secondary
+
+    insert:
+        action: command
+        icon: check-circle
+        label: '{{panel.modal.action.continue}}'
+        align: right
+        command: insert-link

panel/package.json

@@ -22,13 +22,23 @@
         "lint:ts": "prettier './src/ts/**/*.ts' --write && eslint './src/ts/**/*.ts' --fix"
     },
     "dependencies": {
+        "@codemirror/commands": "^6.7.0",
+        "@codemirror/lang-markdown": "^6.3.0",
+        "@codemirror/language": "^6.10.3",
+        "@codemirror/view": "^6.34.1",
         "chartist": "^1.3.0",
-        "codemirror": "^5.65.17",
+        "prosemirror-commands": "^1.6.1",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-view": "^1.34.3",
         "sortablejs": "^1.15.3"
     },
     "devDependencies": {
         "@eslint/js": "^8.57.0",
-        "@types/codemirror": "^5.60.15",
         "@types/sortablejs": "^1.15.8",
         "esbuild": "^0.23.1",
         "eslint": "^8.57.1",

panel/src/scss/components/_base.scss

@@ -63,6 +63,18 @@ pre {
     white-space: pre-wrap;
 }
 
+pre code {
+    padding: 0;
+    color: inherit;
+    font-size: inherit;
+}
+
+blockquote {
+    padding: 0.5rem 1rem;
+    border-left: 0.25rem solid var(--color-base-500);
+    margin: 1rem 0;
+}
+
 [hidden] {
     display: none;
 }