Progress for image node for TipTap: UI and dialog for image settings
parent
d72a740c15
commit
8da183514e
|
|
@ -657,10 +657,59 @@
|
|||
</div>
|
||||
<template id="librecms-image-node-view">
|
||||
<figure>
|
||||
<img src="#{request.contextPath}/assets/remixicon/image-line.svg" />
|
||||
<button class="select-image-button">
|
||||
#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}
|
||||
</button>
|
||||
<!--img src="#{request.contextPath}/assets/remixicon/image-line.svg" />-->
|
||||
<img alt="#{CmsAdminMessages['cms_editor.image_node_view.image.none']}"
|
||||
src=""
|
||||
style="min-height: 4em;" />
|
||||
<div class="border-light librecms-image-node-view-buttons">
|
||||
<button class="btn btn-outline-dark select-image-button">
|
||||
<librecms:remixSvgIcon icon="ri-image-edit-line" />
|
||||
<span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-dark image-settings-button"
|
||||
data-toggle="modal"
|
||||
data-target="#librecms-image-node-view-settings-dialog-">
|
||||
<librecms:remixSvgIcon icon="ri-settings-2-line" />
|
||||
<span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}</span>
|
||||
</button>
|
||||
<div aria-hidden="true"
|
||||
aria-labelledby="librecms-image-node-view-settings-dialog-title-"
|
||||
class="modal fade image-settings-dialog"
|
||||
id="librecms-image-node-view-settings-dialog-"
|
||||
tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title"
|
||||
id="librecms-image-node-view-settings-dialog-title-">
|
||||
#{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.title']}
|
||||
</h3>
|
||||
<button aria-label="#{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.close']}"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
type="button">
|
||||
<bootstrap:svgIcon icon="x-circle" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Image Node View Settings Dialog
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-warning"
|
||||
data-dismiss="modal"
|
||||
type="button">
|
||||
#{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.close']}
|
||||
</button>
|
||||
<button class="btn btn-primary"
|
||||
data-dismiss="modal"
|
||||
type="button">
|
||||
#{CmsAdminMessages['cms_editor.image_node_view.settings.dialog.save']}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption aria-label="#{CmsAdminMessages['cms_editor.image_node_view.figcaption.label']}"
|
||||
contenteditable="true">
|
||||
#{CmsAdminMessages['cms_editor.image_node_view.figcaption.placeholder']}
|
||||
|
|
|
|||
|
|
@ -132,3 +132,21 @@ table.wor{
|
|||
}
|
||||
}
|
||||
|
||||
.cms-tiptap-editor-canvas {
|
||||
max-height: 75vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.librecms-image-node-view {
|
||||
background-color: #ededed;
|
||||
position: relative;
|
||||
|
||||
.librecms-image-node-view-buttons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 3em;
|
||||
}
|
||||
}
|
||||
|
|
@ -465,6 +465,31 @@ const ImageNode = Node.create({
|
|||
|
||||
defining: true,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
altText: {
|
||||
parseHTML: (element) => {
|
||||
const imgElem = element.querySelector("img");
|
||||
if (imgElem) {
|
||||
return imgElem.alt;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
figCaption: {
|
||||
parseHTML: (element) => {
|
||||
const figCaptionElem = element.querySelector("figcaption");
|
||||
if (figCaptionElem) {
|
||||
return figCaptionElem.innerHTML;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
setLibreCmsImage:
|
||||
|
|
@ -476,26 +501,77 @@ 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;
|
||||
}
|
||||
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.";
|
||||
|
||||
const template = templateNode as HTMLTemplateElement;
|
||||
const nodeView = template.content.cloneNode(true);
|
||||
const dom = document.createElement("div");
|
||||
dom.appendChild(nodeView);
|
||||
return errorMsg;
|
||||
}
|
||||
|
||||
return {
|
||||
dom,
|
||||
console.log("Node: ");
|
||||
console.dir(node);
|
||||
|
||||
console.log(`getPos =`);
|
||||
console.dir(getPos);
|
||||
|
||||
console.log(`HTMLAttributes =`);
|
||||
console.dir(HTMLAttributes);
|
||||
|
||||
console.log(`decorations = ${decorations}`);
|
||||
console.dir(decorations);
|
||||
|
||||
console.log(`extension = ${extension}`);
|
||||
console.dir(extension);
|
||||
|
||||
const template = templateNode as HTMLTemplateElement;
|
||||
const nodeView = template.content.cloneNode(true) as HTMLElement;
|
||||
const dialogId = `librecms-image-node-view-settings-dialog-${Math.floor(
|
||||
Math.random() * 1000000000
|
||||
)}`;
|
||||
const dialogTitleId = `${dialogId}-title`;
|
||||
const settingsButtonElem = nodeView.querySelector(
|
||||
".image-settings-button"
|
||||
);
|
||||
if (settingsButtonElem) {
|
||||
settingsButtonElem.setAttribute("data-target", `#${dialogId}`);
|
||||
}
|
||||
const settingsDialogElem = nodeView.querySelector(
|
||||
".modal.image-settings-dialog"
|
||||
);
|
||||
if (settingsDialogElem) {
|
||||
settingsDialogElem.id = dialogId;
|
||||
settingsDialogElem.setAttribute("aria-labelledby", dialogTitleId);
|
||||
|
||||
const settingsDialogTitleElem =
|
||||
settingsDialogElem.querySelector(".modal-title");
|
||||
if (settingsDialogTitleElem) {
|
||||
settingsDialogTitleElem.id = dialogTitleId;
|
||||
}
|
||||
}
|
||||
|
||||
const figCaptionElem = nodeView.querySelector("figcaption");
|
||||
if (node.attrs.figCaption !== "" && figCaptionElem) {
|
||||
figCaptionElem.innerHTML = node.attrs.figCaption;
|
||||
}
|
||||
const dom = document.createElement("div");
|
||||
dom.classList.add("librecms-image-node-view", "p-2");
|
||||
dom.appendChild(nodeView);
|
||||
|
||||
return {
|
||||
dom,
|
||||
};
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
|
|
@ -510,7 +586,7 @@ const ImageNode = Node.create({
|
|||
return [
|
||||
"figure",
|
||||
mergeAttributes(HTMLAttributes, { "data-type": "librecms-image-node" }),
|
||||
["img", {"src": "/assets/remixicon/image-line.svg"}],
|
||||
["img", { src: "/assets/remixicon/image-line.svg" }],
|
||||
["figcaption"],
|
||||
];
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue