+
+
+
+
+
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
index 2b7753292..8040c8487 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -1,6 +1,6 @@
import "bootstrap";
import * as $ from "jquery";
-import { ChainedCommands, Editor, Node } from "@tiptap/core";
+import { ChainedCommands, Editor, Node, mergeAttributes } from "@tiptap/core";
import Gapcursor from "@tiptap/extension-gapcursor";
import StarterKit from "@tiptap/starter-kit";
import Subscript from "@tiptap/extension-subscript";
@@ -457,9 +457,9 @@ const ImageNode = Node.create({
content: "inline*",
- marks: '',
+ marks: "",
- group: 'block',
+ group: "block",
code: false,
@@ -475,17 +475,44 @@ const ImageNode = Node.create({
};
},
+ addNodeView() {
+ return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
+ const templateNode = document.querySelector("#librecms-image-node-view");
+ if (!templateNode) {
+ const errorMsg = document.createElement("div");
+ errorMsg.classList.add("alert");
+ errorMsg.classList.add("alert-danger");
+ errorMsg.textContent = "Failed to create image node view.";
+
+ return errorMsg;
+ }
+
+ const template = templateNode as HTMLTemplateElement;
+ const nodeView = template.content.cloneNode(true);
+ const dom = document.createElement("div");
+ dom.appendChild(nodeView);
+
+ return {
+ dom,
+ }
+ }
+ },
+
parseHTML() {
return [
{
- tag: "figure",
- "data-librecms-editor-node": "image",
+ tag: "figure[data-type=librecms-image-node]",
},
];
},
renderHTML({ HTMLAttributes }) {
- return ["figure", HTMLAttributes, ["img"], ["figcaption"]];
+ return [
+ "figure",
+ mergeAttributes(HTMLAttributes, { "data-type": "librecms-image-node" }),
+ ["img", {"src": "/assets/remixicon/image-line.svg"}],
+ ["figcaption"],
+ ];
},
});
+
+