trek 2.5.0 → 2.6.0

data/app/components/trek/form/content_editor_component/content_editor_component.js

@@ -1,20 +1,21 @@
 import "./content_editor_component.css";
 import { Editor } from "@tiptap/core";
 import FloatingMenu from "@tiptap/extension-floating-menu";
-import Link from "@tiptap/extension-link";
-// import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from "@tiptap/starter-kit";
 import { Controller as BaseController } from "@hotwired/stimulus";
 import { TableOfContents } from "./extensions/table_of_contents.js";
 import PromptsBlock from "./extensions/prompts_block.js";
 import ImageBlock from "./extensions/image_block.js";
 
+// The content editor (Trek::Form::ContentEditorComponent): Tiptap, its toolbar, and the panels inserting
+// links, images and calls to action. The document is kept in the form's field as JSON.
 export class Controller extends BaseController {
   static classes = ["active", "empty"];
   static targets = [
     "editorContent",
     "editorJson",
     "floatingMenu",
+    "stateButton",
     "hiddenPromptsButton",
     "hiddenImageButton",
     "hiddenLinkButton",
@@ -34,43 +35,50 @@ export class Controller extends BaseController {
           heading: {
             levels: [2, 3, 4],
           },
-        }),
-        // Placeholder.configure({
-        //   emptyEditorClass: this.emptyClass,
-        //   placeholder: this.placeholderValue,
-        // }),
-        Link.configure({
-          openOnClick: false,
-          // Internal links are stored as GlobalIDs (resolved to URLs at render
-          // time); without this the gid:// scheme fails Link's URI validation
-          // and setLink silently does nothing.
-          protocols: ["gid"],
-          HTMLAttributes: {
-            "data-action": "trek--form--content-editor#selectLink",
-            target: null,
+          link: {
+            openOnClick: false,
+            // Internal links are stored as GlobalIDs (resolved to URLs at
+            // render time): without this, setLink refuses the gid:// scheme
+            // and silently does nothing. A check rather than the `protocols`
+            // option, which registers the scheme with linkifyjs, and warns
+            // from the second editor on ("linkifyjs: already initialized").
+            isAllowedUri: (url, { defaultValidate }) =>
+              url.startsWith("gid://") || defaultValidate(url),
+            HTMLAttributes: {
+              "data-action": `${this.identifier}#selectLink`,
+              target: null,
+            },
           },
+          // Not in Trek's editor before Tiptap 3: no underline (nor its
+          // Ctrl+U shortcut), and no empty paragraph added after a final
+          // block, which would change every saved document
+          underline: false,
+          trailingNode: false,
         }),
         TableOfContents,
         this.hasFloatingMenuTarget
-          ? FloatingMenu.configure({
-              element: this.floatingMenuTarget,
-            })
+          ? FloatingMenu.configure({ element: this.floatingMenuTarget })
           : null,
         ImageBlock,
         PromptsBlock,
-      ],
+      ].filter(Boolean),
       content: this.contentJson,
       autofocus: this.autofocusValue ? "end" : false,
+      onUpdate: () => this.updateContent(),
+      // Every change of the document or the selection: the buttons show the
+      // styles and the block where the cursor is
+      onTransaction: () => this.updateButtons(),
     });
 
-    this.editor.on("update", () => this.updateContent());
-    this.editor.on("selectionUpdate", (e) => this.updateSelection(e));
+    // Tiptap 3 moves the floating menu next to the editor when it shows it,
+    // and out of the page when it hides it, but leaves it where the template
+    // puts it until then: out of the page from the start, as Tiptap 2 did
+    if (this.hasFloatingMenuTarget) this.floatingMenuTarget.remove();
     this.updateContent();
+    this.updateButtons();
   }
 
   disconnect() {
-    this.editor.off("update", () => this.updateContent());
-    this.editor.off("selectionUpdate", () => this.updateSelection());
     this.editor.destroy();
     this.editor = null;
   }
@@ -79,264 +87,99 @@ export class Controller extends BaseController {
     this.editor.chain().focus().run();
   }
 
+  // A toolbar button's command, from its params (see the component's `command_data`)
+  run({ params: { command, level } }) {
+    this.editor
+      .chain()
+      .focus()
+      [command](level ? { level } : undefined)
+      .run();
+  }
+
   updateContent() {
     this.editorJsonTarget.value = JSON.stringify(this.editor.getJSON());
   }
 
-  updateSelection() {
-    const buttons = [
-      { key: "bold" },
-      { key: "italic" },
-      { key: "strike" },
-      { key: "code" },
-      { key: "link" },
-      { key: "paragraph" },
-      { key: "h1", command: "heading", params: { level: 1 } },
-      { key: "h2", command: "heading", params: { level: 2 } },
-      { key: "h3", command: "heading", params: { level: 3 } },
-      { key: "h4", command: "heading", params: { level: 4 } },
-      { key: "h5", command: "heading", params: { level: 5 } },
-      { key: "h6", command: "heading", params: { level: 6 } },
-      { key: "bulletList" },
-      { key: "orderedList" },
-      { key: "codeBlock" },
-      { key: "blockquote" },
-    ];
-
-    buttons.forEach((b) => {
-      const button = this.element.querySelector("button." + b.key);
-
-      if (!button) return;
-
-      const active = this.editor.isActive(b.command || b.key, b.params || {});
-
+  updateButtons() {
+    this.stateButtonTargets.forEach((button) => {
+      const level = Number(
+        button.getAttribute(`data-${this.identifier}-level-param`)
+      );
+      const active = this.editor.isActive(
+        button.dataset.stateName,
+        level ? { level } : {}
+      );
       button.classList.toggle(this.activeClass, active);
     });
   }
 
-  toggleBold(e) {
-    this.editor.chain().focus().toggleBold().run();
-    e.target.classList.toggle(this.activeClass, this.editor.isActive("bold"));
-  }
-
-  toggleItalic(e) {
-    this.editor.chain().focus().toggleItalic().run();
-    e.target.classList.toggle(this.activeClass, this.editor.isActive("italic"));
-  }
-
-  toggleStrike(e) {
-    this.editor.chain().focus().toggleStrike().run();
-    e.target.classList.toggle(this.activeClass, this.editor.isActive("strike"));
-  }
-
-  toggleCode(e) {
-    this.editor.chain().focus().toggleCode().run();
-    e.target.classList.toggle(this.activeClass, this.editor.isActive("code"));
-  }
+  // Links
 
   selectLink() {
     this.editor.commands.extendMarkRange("link");
   }
 
-  toggleLink(e) {
+  toggleLink() {
     this.selectLink();
-    e.target.classList.toggle(this.activeClass, this.editor.isActive("link"));
-
-    const attributes = this.editor.getAttributes("link");
-    attributes.text = this.currentlySelectedText();
-
-    const url = this.hiddenLinkButtonTarget.dataset.basePath;
-    this.hiddenLinkButtonTarget.href = url + "&" + this.linkParams(attributes);
-    this.hiddenLinkButtonTarget.click();
-  }
-
-  linkParams(attributes) {
-    const linkAttributes = Object.fromEntries(
-      Object.entries(attributes).map(([k, v]) => [`link[${k}]`, v])
-    );
-    return new URLSearchParams(linkAttributes).toString();
-  }
-
-  currentlySelectedText() {
-    const state = this.editor.state;
-    const text = state.doc.textBetween(
-      state.selection.from,
-      state.selection.to
-    );
-
-    return text;
-  }
-
-  linkInserterTargetConnected(t) {
-    const params = JSON.parse(t.dataset.params);
-
-    this.editor
-      .chain()
-      .focus()
-      .setLink({
-        href: params.href,
-        target: params.target,
-        title: params.title,
-      })
-      .run();
-
-    t.parentNode.removeChild(t);
-  }
-
-  unsetAllMarks() {
-    this.editor.chain().focus().unsetAllMarks().run();
-  }
-
-  clearNodes() {
-    this.editor.chain().focus().clearNodes().run();
-  }
-
-  setParagraph(e) {
-    this.editor.chain().focus().setParagraph().run();
-    e.target.classList.toggle(
-      this.activeClass,
-      this.editor.isActive("paragraph")
-    );
-  }
-
-  toggleHeading(e) {
-    const level = parseInt(e.target.dataset.level, 10);
-    this.editor.chain().focus().toggleHeading({ level: level }).run();
-    e.target.classList.toggle(
-      this.activeClass,
-      this.editor.isActive("heading", { level: level })
-    );
-  }
-
-  toggleBulletList(e) {
-    this.editor.chain().focus().toggleBulletList().run();
-    e.target.classList.toggle(
-      this.activeClass,
-      this.editor.isActive("bulletList")
-    );
-  }
-
-  toggleOrderedList(e) {
-    this.editor.chain().focus().toggleOrderedList().run();
-    e.target.classList.toggle(
-      this.activeClass,
-      this.editor.isActive("orderedList")
-    );
-  }
 
-  toggleCodeBlock(e) {
-    this.editor.chain().focus().toggleCodeBlock().run();
-    e.target.classList.toggle(
-      this.activeClass,
-      this.editor.isActive("codeBlock")
-    );
+    const attributes = {
+      ...this.editor.getAttributes("link"),
+      text: this.selectedText,
+    };
+    this.openPanel(this.hiddenLinkButtonTarget, toParams("link", attributes));
   }
 
-  toggleBlockquote(e) {
-    this.editor.chain().focus().toggleBlockquote().run();
-    e.target.classList.toggle(
-      this.activeClass,
-      this.editor.isActive("blockquote")
-    );
+  get selectedText() {
+    const { doc, selection } = this.editor.state;
+    return doc.textBetween(selection.from, selection.to);
   }
 
-  setHorizontalRule() {
-    this.editor.chain().focus().setHorizontalRule().run();
+  linkInserterTargetConnected(inserter) {
+    const { href, target, title } = JSON.parse(inserter.dataset.params);
+    this.editor.chain().focus().setLink({ href, target, title }).run();
+    inserter.remove();
   }
 
-  setHardBreak() {
-    this.editor.chain().focus().setHardBreak().run();
-  }
+  // Blocks (calls to action, images): a block's button carries its
+  // attributes (see block_view.js), the floating menu's none
 
-  undo() {
-    this.editor.chain().focus().undo().run();
+  togglePrompts(event) {
+    this.openPanel(this.hiddenPromptsButtonTarget, blockParams(event));
   }
 
-  redo() {
-    this.editor.chain().focus().redo().run();
+  toggleImage(event) {
+    this.openPanel(this.hiddenImageButtonTarget, blockParams(event));
   }
 
-  togglePrompts(e) {
-    const params = e.target.closest("button").dataset.params;
-    const url = this.hiddenPromptsButtonTarget.dataset.basePath;
-    this.hiddenPromptsButtonTarget.href = url + (params ? "&" + params : "");
-    this.hiddenPromptsButtonTarget.click();
+  // The panel's response: a new block, at the cursor, or an edited one, in
+  // place of the block selected by clicking it
+  contentInserterTargetConnected(inserter) {
+    this.editor.commands.insertContent(inserter.innerHTML);
+    inserter.remove();
   }
 
-  contentInserterTargetConnected(t) {
-    const content = t.innerHTML;
-
-    if (this._editingImagePos != null) {
-      // Update existing image block in place
-      const pos = this._editingImagePos;
-      this._editingImagePos = null;
-
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(content, "text/html");
-      const imageBlock = doc.querySelector("image-block");
-
-      if (imageBlock) {
-        const attrs = {};
-        for (const attr of imageBlock.attributes) {
-          attrs[attr.name] = attr.value;
-        }
-        const tr = this.editor.state.tr;
-        const node = this.editor.state.doc.nodeAt(pos);
-        if (node && node.type.name === "imageBlock") {
-          tr.setNodeMarkup(pos, undefined, attrs);
-          this.editor.view.dispatch(tr);
-        } else {
-          this.editor.commands.insertContent(content);
-        }
-      } else {
-        this.editor.commands.insertContent(content);
-      }
-    } else {
-      this.editor.commands.insertContent(content);
-    }
-
-    t.parentNode.removeChild(t);
-  }
-
-  toggleImage(e) {
-    const button = e.target.closest("button");
-    const params = button.dataset.params;
-
-    // Check if clicking an existing image block in the editor
-    const imageBlockEl = button.closest("image-block");
-    if (imageBlockEl) {
-      const pos = this.editor.view.posAtDOM(imageBlockEl, 0);
-      const resolved = this.editor.state.doc.resolve(pos);
-      // Walk up to find the imageBlock node position
-      for (let d = resolved.depth; d >= 0; d--) {
-        if (resolved.node(d).type.name === "imageBlock") {
-          this._editingImagePos = d > 0 ? resolved.before(d) : pos;
-          break;
-        }
-      }
-      // Fallback: the pos itself might point at the imageBlock
-      if (this._editingImagePos == null) {
-        const node = this.editor.state.doc.nodeAt(pos);
-        if (node && node.type.name === "imageBlock") {
-          this._editingImagePos = pos;
-        }
-      }
-    } else {
-      this._editingImagePos = null;
-    }
-
-    const url = this.hiddenImageButtonTarget.dataset.basePath;
-    this.hiddenImageButtonTarget.href = url + (params ? "&" + params : "");
-    this.hiddenImageButtonTarget.click();
+  // Opens a panel through its hidden link, with the given params
+  openPanel(link, params) {
+    const url = link.dataset.basePath;
+    link.href = params ? `${url}&${params}` : url;
+    link.click();
   }
 
   get contentJson() {
     const { value } = this.editorJsonTarget;
-
-    if (value == "") {
-      return "";
-    } else {
-      return JSON.parse(value);
-    }
+    return value == "" ? "" : JSON.parse(value);
   }
 }
+
+function toParams(scope, attributes) {
+  return new URLSearchParams(
+    Object.entries(attributes).map(([name, value]) => [
+      `${scope}[${name}]`,
+      value ?? "",
+    ])
+  ).toString();
+}
+
+function blockParams(event) {
+  return event.target.closest("button")?.dataset.params;
+}

data/app/components/trek/form/content_editor_component/extensions/block_view.js

@@ -0,0 +1,40 @@
+// The editor's view of a block edited in a panel (image, prompt): a button opening the panel with the
+// block's attributes. Clicking it selects the block, so that the panel's response replaces it. Built with
+// DOM nodes rather than HTML, so that the attributes, typed by authors, stay text.
+export function blockView({
+  tag,
+  param,
+  actions,
+  attributes,
+  editor,
+  getPos,
+  render,
+}) {
+  const dom = document.createElement(tag);
+  const button = document.createElement("button");
+  button.type = "button";
+  button.dataset.action = actions;
+  button.dataset.params = new URLSearchParams(
+    Object.entries(attributes).map(([name, value]) => [
+      `${param}[${name}]`,
+      value ?? "",
+    ])
+  ).toString();
+  // Before the Stimulus actions, which run on the same click and open the panel
+  button.addEventListener("click", () => {
+    const pos = getPos();
+    if (pos !== undefined) editor.commands.setNodeSelection(pos);
+  });
+  render(button);
+  dom.append(button);
+  return { dom };
+}
+
+export function element(tag, properties = {}, ...children) {
+  const node = document.createElement(tag);
+  Object.entries(properties).forEach(([name, value]) => {
+    if (value !== null && value !== undefined) node.setAttribute(name, value);
+  });
+  node.append(...children);
+  return node;
+}

data/app/components/trek/form/content_editor_component/extensions/image_block.js

@@ -1,11 +1,5 @@
 import { Node, mergeAttributes } from "@tiptap/core";
-
-function attributesToParams(attributes) {
-  const params = Object.fromEntries(
-    Object.entries(attributes).map(([k, v]) => [`image[${k}]`, v])
-  );
-  return new URLSearchParams(params).toString();
-}
+import { blockView, element } from "./block_view.js";
 
 export default Node.create({
   name: "imageBlock",
@@ -48,24 +42,32 @@ export default Node.create({
   },
 
   addNodeView() {
-    return ({ node }) => {
-      const dom = document.createElement("image-block");
-      const params = attributesToParams(node.attrs);
-
-      dom.innerHTML = `
-        <button type="button" data-action="trek--form--content-editor#toggleImage trek--layout#openPanel" data-params="${params}">
-          <span class="c-trek--form--content-editor-content-image" data-size="${
-            node.attrs.size
-          }">
-            <img src="${node.attrs.file_url}" alt="${node.attrs.alt}" />
-          </span>
-          ${node.attrs.text ? `<span>${node.attrs.text}</span>` : ""}
-        </button>
-      `;
-
-      return {
-        dom,
-      };
-    };
+    return ({ node, editor, getPos }) =>
+      blockView({
+        tag: "image-block",
+        param: "image",
+        actions:
+          "trek--form--content-editor#toggleImage trek--layout#openPanel",
+        attributes: node.attrs,
+        editor,
+        getPos,
+        render: (button) => {
+          button.append(
+            element(
+              "span",
+              {
+                class: "c-trek--form--content-editor-content-image",
+                "data-size": node.attrs.size,
+              },
+              element("img", {
+                src: node.attrs.file_url,
+                alt: node.attrs.alt ?? "",
+              })
+            )
+          );
+          if (node.attrs.text)
+            button.append(element("span", {}, node.attrs.text));
+        },
+      });
   },
 });

data/app/components/trek/form/content_editor_component/extensions/prompts_block.js

@@ -1,11 +1,5 @@
 import { Node, mergeAttributes } from "@tiptap/core";
-
-function attributesToParams(attributes) {
-  const params = Object.fromEntries(
-    Object.entries(attributes).map(([k, v]) => [`prompt[${k}]`, v])
-  );
-  return new URLSearchParams(params).toString();
-}
+import { blockView } from "./block_view.js";
 
 export default Node.create({
   name: "promptsBlock",
@@ -14,9 +8,6 @@ export default Node.create({
 
   addAttributes() {
     return {
-      color: {
-        default: null,
-      },
       href: {
         default: null,
       },
@@ -45,21 +36,19 @@ export default Node.create({
   },
 
   addNodeView() {
-    return ({ node }) => {
-      const dom = document.createElement("prompts-block");
-      const params = attributesToParams(node.attrs);
-
-      dom.innerHTML = `
-        <button type="button" class="color-${node.attrs.color}" title="${
-        node.attrs.title || ""
-      }" data-action="trek--form--content-editor#togglePrompts trek--layout#openPanel" data-params="${params}">${
-        node.attrs.text
-      }</button>
-      `;
-
-      return {
-        dom,
-      };
-    };
+    return ({ node, editor, getPos }) =>
+      blockView({
+        tag: "prompts-block",
+        param: "prompt",
+        actions:
+          "trek--form--content-editor#togglePrompts trek--layout#openPanel",
+        attributes: node.attrs,
+        editor,
+        getPos,
+        render: (button) => {
+          button.title = node.attrs.title || "";
+          button.textContent = node.attrs.text;
+        },
+      });
   },
 });

data/app/components/trek/form/content_editor_component/extensions/table_of_contents.js

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "prosemirror-state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 import slugify from "slugify";
 
 const isTargetNodeOfType = (node, type) => node.type === type;
@@ -19,13 +19,11 @@ export const TableOfContents = Extension.create({
           },
         },
         renderHTML: (attributes) => {
-          console.log("renderHTML", attributes);
           return {
             id: attributes.id,
           };
         },
         parseHTML: (element) => {
-          console.log("parseHTML", element);
           return element.id;
         },
       },

data/app/components/trek/form/content_editor_component.rb

@@ -35,6 +35,21 @@ module Trek
         )
       end
 
+      # A toolbar button running a Tiptap command (`editor.chain().focus()[command]({ level })`), marked
+      # active when the selection has `active`, e.g. "bold", or "heading" with the button's level
+      def command_data(command, active: nil, level: nil)
+        {
+          action: stimulus_action("run"),
+          "#{identifier}-command-param": command,
+          "#{identifier}-level-param": level
+        }.compact.merge(active ? state_data(active) : {})
+      end
+
+      # A button marked active when the selection has `name` (Tiptap's `isActive`)
+      def state_data(name)
+        { stimulus_target_key => "stateButton", "state-name": name }
+      end
+
       def content_data_attributes
         {
           action: stimulus_action("click", "focus")

data/app/components/trek/form/image_field_component/image_field_component.css

@@ -20,7 +20,7 @@
   width: 25rem;
 }
 
-.preview a,
+.original,
 .preview img {
   display: block;
   height: 100%;
@@ -31,6 +31,45 @@
   object-fit: contain;
 }
 
+/* The links to the original, opening and downloading it: icons over a darkened image, on hover and focus */
+.original {
+  position: relative;
+}
+
+.original-actions {
+  --icon-size: 2rem;
+
+  align-items: center;
+  background-color: rgb(0 0 0 / 45%);
+  display: flex;
+  gap: 0.8rem;
+  inset: 0;
+  justify-content: center;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.original:hover .original-actions,
+.original:focus-within .original-actions {
+  opacity: 1;
+}
+
+.original-action {
+  align-items: center;
+  border-radius: 0.4rem;
+  color: white;
+  display: flex;
+  justify-content: center;
+  padding: 0.8rem;
+  transition: background-color 0.15s ease-in-out;
+}
+
+.original-action:hover,
+.original-action:focus-visible {
+  background-color: rgb(255 255 255 / 20%);
+}
+
 .actions {
   align-items: flex-start;
   display: flex;