LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Image Node for Tiptap working

pull/10/head
Jens Pelzetter 2021-10-09 21:03:26 +02:00
parent 2169e07ab2
commit 5513dc178e
8 changed files with 478 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
View File

@ -6,10 +6,10 @@
xmlns:cc="http://xmlns.jcp.org/jsf/composite" xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
> >
<cc:interface <cc:interface
shortDescription="A editor component for HTML texts using the TipTap editor. To use this component you have also to include the cms-editor.js file into the page." shortDescription="A editor component for HTML texts using the TipTap editor. To use this component you have also to include the cms-editor.js file into the page."
> >
<!-- <cc:attribute <!-- <cc:attribute
name="addMethod" name="addMethod"
required="true" required="true"
@ -63,14 +63,26 @@
required="true" required="true"
shortDescription="The back URL." shortDescription="The back URL."
type="String" type="String"
/> />
<cc:attribute
name="baseUrl"
required="true"
shortDescription="Base URL for generating URLs of API endpoints."
type="String"
/>
<cc:attribute <cc:attribute
name="canEdit" name="canEdit"
default="true" default="true"
required="false" required="false"
shortDescription="Can the current user edit the text?" shortDescription="Can the current user edit the text?"
type="boolean" type="boolean"
/> />
<cc:attribute
name="contentSection"
required="true"
shortDescription="The name of the current content section. Required for generating URLs of API endpoints."
type="String"
/>
<!-- <cc:attribute <!-- <cc:attribute
name="editButtonLabel" name="editButtonLabel"
default="#{CmsAdminMessages['edit_button.label']}" default="#{CmsAdminMessages['edit_button.label']}"
@ -84,41 +96,41 @@
required="false" required="false"
shortDescription="Label for the cancel and close button of the edit dialog" shortDescription="Label for the cancel and close button of the edit dialog"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogSubmitLabel" name="editDialogSubmitLabel"
default="#{CmsAdminMessages['save_button.label']}" default="#{CmsAdminMessages['save_button.label']}"
required="false" required="false"
shortDescription="Label for the submit button of the edit dialog" shortDescription="Label for the submit button of the edit dialog"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogValueHelp" name="editDialogValueHelp"
default="Value to update" default="Value to update"
required="false" required="false"
shortDescription="Help text for the value field" shortDescription="Help text for the value field"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogValueLabel" name="editDialogValueLabel"
default="Value" default="Value"
required="false" required="false"
shortDescription="Label for the value field" shortDescription="Label for the value field"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogTitle" name="editDialogTitle"
default="#{CmsAdminMessages['text.edit.dialog.title']}" default="#{CmsAdminMessages['text.edit.dialog.title']}"
required="false" required="false"
shortDescription="Title for the edit dialog" shortDescription="Title for the edit dialog"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editMethod" name="editMethod"
required="true" required="true"
shortDescription="URL of the endpoint for editing/updating a value. The value of the locale to update is added after the provided URL, eg. /de for updating the german value." shortDescription="URL of the endpoint for editing/updating a value. The value of the locale to update is added after the provided URL, eg. /de for updating the german value."
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="hasUnusedLocales" name="hasUnusedLocales"
required="true" required="true"
@ -131,13 +143,13 @@
required="false" required="false"
shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component." shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component."
type="int" type="int"
/> />
<cc:attribute <cc:attribute
name="editorId" name="editorId"
required="true" required="true"
shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents" shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents"
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="emptyText" name="emptyText"
default="#{text.editor.no_localized_values}" default="#{text.editor.no_localized_values}"
@ -150,38 +162,38 @@
default="Failed to save." default="Failed to save."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="messageSaveSuccessful" name="messageSaveSuccessful"
default="Saved sucessfully." default="Saved sucessfully."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="messageVariantLoadFailed" name="messageVariantLoadFailed"
default="Failed to load variant." default="Failed to load variant."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="mode" name="mode"
default="full" default="full"
shortDescription="The editor mode. Use 'full' to enable all options including adding images etc. Use 'textonly' for a minimal version that only supports text editing, but does not allow insertation of images etc." shortDescription="The editor mode. Use 'full' to enable all options including adding images etc. Use 'textonly' for a minimal version that only supports text editing, but does not allow insertation of images etc."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="objectIdentifier" name="objectIdentifier"
required="true" required="true"
shortDescription="Identifier of the object to which the localized string belongs" shortDescription="Identifier of the object to which the localized string belongs"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="selectedLocale" name="selectedLocale"
required="true" required="true"
shortDescription="The selected locale." shortDescription="The selected locale."
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="removeButtonLabel" name="removeButtonLabel"
default="Remove" default="Remove"
@ -249,7 +261,7 @@
required="true" required="true"
shortDescription="Title/Heading of the editor widget" shortDescription="Title/Heading of the editor widget"
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="unusedLocales" name="unusedLocales"
required="true" required="true"
@ -267,7 +279,7 @@
required="true" required="true"
shortDescription="URL of the endpoint for retrieving a variant. The locale of the variant to retrieve is appended as last token." shortDescription="URL of the endpoint for retrieving a variant. The locale of the variant to retrieve is appended as last token."
type="String" type="String"
/> />
<!-- <cc:attribute name="viewButtonLabel" default="View" type="String" /> <!-- <cc:attribute name="viewButtonLabel" default="View" type="String" />
<cc:attribute name="viewDialogTitle" default="View" type="String" /> <cc:attribute name="viewDialogTitle" default="View" type="String" />
<cc:attribute <cc:attribute
@ -290,11 +302,13 @@
<cc:implementation> <cc:implementation>
<div <div
class="cms-editor" class="cms-editor"
data-baseUrl="#{cc.attrs.baseUrl}"
data-contentsection="#{cc.attrs.contentSection}"
data-locale="#{cc.attrs.selectedLocale}" data-locale="#{cc.attrs.selectedLocale}"
data-save-url="#{cc.attrs.editMethod}/#{variant.locale}" data-save-url="#{cc.attrs.editMethod}/#{variant.locale}"
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}" data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
id="#{cc.attrs.editorId}" id="#{cc.attrs.editorId}"
> >
<c:choose> <c:choose>
<c:when test="#{cc.attrs.headingLevel == 1}"> <c:when test="#{cc.attrs.headingLevel == 1}">
<h1>#{cc.attrs.title}</h1> <h1>#{cc.attrs.title}</h1>
@ -376,14 +390,14 @@
class="cms-tiptap-editor" class="cms-tiptap-editor"
data-locale="#{cc.attrs.selectedLocale}" data-locale="#{cc.attrs.selectedLocale}"
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}" data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
> >
<div class="cms-tiptap-editor-buttons mb-1"> <div class="cms-tiptap-editor-buttons mb-1">
<div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-textformatting"> <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-textformatting">
<button <button
class="btn btn-outline-dark tiptap-emph" class="btn btn-outline-dark tiptap-emph"
title="#{CmsAdminMessages['cms_editor.buttons.emph']}" title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
type="button" type="button"
> >
<!-- <bootstrap:svgIcon icon="type-italic" /> --> <!-- <bootstrap:svgIcon icon="type-italic" /> -->
<librecms:remixSvgIcon icon="ri-italic" /> <librecms:remixSvgIcon icon="ri-italic" />
</button> </button>
@ -391,7 +405,7 @@
class="btn btn-outline-dark tiptap-strong-emph" class="btn btn-outline-dark tiptap-strong-emph"
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}" title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
type="button" type="button"
> >
<!-- <bootstrap:svgIcon icon="type-bold" />--> <!-- <bootstrap:svgIcon icon="type-bold" />-->
<librecms:remixSvgIcon icon="ri-bold" /> <librecms:remixSvgIcon icon="ri-bold" />
</button> </button>
@ -399,7 +413,7 @@
class="btn btn-outline-dark tiptap-code" class="btn btn-outline-dark tiptap-code"
title="#{CmsAdminMessages['cms_editor.buttons.code']}" title="#{CmsAdminMessages['cms_editor.buttons.code']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="code" />--> <!--<bootstrap:svgIcon icon="code" />-->
<librecms:remixSvgIcon icon="ri-code-view" /> <librecms:remixSvgIcon icon="ri-code-view" />
</button> </button>
@ -407,7 +421,7 @@
class="btn btn-outline-dark tiptap-strikethrough" class="btn btn-outline-dark tiptap-strikethrough"
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}" title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="type-strikethrough" />--> <!--<bootstrap:svgIcon icon="type-strikethrough" />-->
<librecms:remixSvgIcon icon="ri-strikethrough" /> <librecms:remixSvgIcon icon="ri-strikethrough" />
</button> </button>
@ -415,7 +429,7 @@
class="btn btn-outline-dark tiptap-subscript" class="btn btn-outline-dark tiptap-subscript"
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}" title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
type="button" type="button"
> >
<!--<span aria-hidden="true">x<sub>n</sub></span>--> <!--<span aria-hidden="true">x<sub>n</sub></span>-->
<librecms:remixSvgIcon icon="ri-subscript" /> <librecms:remixSvgIcon icon="ri-subscript" />
</button> </button>
@ -423,7 +437,7 @@
class="btn btn-outline-dark tiptap-superscript" class="btn btn-outline-dark tiptap-superscript"
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}" title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
type="button" type="button"
> >
<!--<span aria-hidden="true">x<sup>n</sup></span>--> <!--<span aria-hidden="true">x<sup>n</sup></span>-->
<librecms:remixSvgIcon icon="ri-superscript" /> <librecms:remixSvgIcon icon="ri-superscript" />
</button> </button>
@ -434,8 +448,8 @@
class="btn btn-outline-dark tiptap-h#{level}" class="btn btn-outline-dark tiptap-h#{level}"
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}" title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
type="button" type="button"
> >
<!--<span aria-hidden="true">H#{level}</span>--> <!--<span aria-hidden="true">H#{level}</span>-->
<librecms:remixSvgIcon icon="ri-h-#{level}" /> <librecms:remixSvgIcon icon="ri-h-#{level}" />
</button> </button>
</ui:repeat> </ui:repeat>
@ -445,7 +459,7 @@
class="btn btn-outline-dark tiptap-paragraph" class="btn btn-outline-dark tiptap-paragraph"
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}" title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="type" />--> <!--<bootstrap:svgIcon icon="type" />-->
<librecms:remixSvgIcon icon="ri-text" /> <librecms:remixSvgIcon icon="ri-text" />
</button> </button>
@ -453,7 +467,7 @@
class="btn btn-outline-dark tiptap-blockquote" class="btn btn-outline-dark tiptap-blockquote"
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}" title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
type="button" type="button"
> >
<!--bootstrap:svgIcon icon="blockquote-left" />--> <!--bootstrap:svgIcon icon="blockquote-left" />-->
<librecms:remixSvgIcon icon="ri-double-quotes-l" /> <librecms:remixSvgIcon icon="ri-double-quotes-l" />
</button> </button>
@ -461,7 +475,7 @@
class="btn btn-outline-dark tiptap-codeblock" class="btn btn-outline-dark tiptap-codeblock"
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}" title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="code-square" />--> <!--<bootstrap:svgIcon icon="code-square" />-->
<librecms:remixSvgIcon icon="ri-code-box-line" /> <librecms:remixSvgIcon icon="ri-code-box-line" />
</button> </button>
@ -471,7 +485,7 @@
class="btn btn-outline-dark tiptap-ul" class="btn btn-outline-dark tiptap-ul"
title="#{CmsAdminMessages['cms_editor.buttons.ul']}" title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="list-ul" />--> <!--<bootstrap:svgIcon icon="list-ul" />-->
<librecms:remixSvgIcon icon="ri-list-unordered" /> <librecms:remixSvgIcon icon="ri-list-unordered" />
</button> </button>
@ -479,7 +493,7 @@
class="btn btn-outline-dark tiptap-ol" class="btn btn-outline-dark tiptap-ol"
title="#{CmsAdminMessages['cms_editor.buttons.ol']}" title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="list-ol" />--> <!--<bootstrap:svgIcon icon="list-ol" />-->
<librecms:remixSvgIcon icon="ri-list-ordered" /> <librecms:remixSvgIcon icon="ri-list-ordered" />
</button> </button>
@ -491,7 +505,7 @@
data-toggle="modal" data-toggle="modal"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
type="button" type="button"
> >
<!--<bootstrap:svgIcon icon="table" />--> <!--<bootstrap:svgIcon icon="table" />-->
<librecms:remixSvgIcon icon="ri-table-2" /> <librecms:remixSvgIcon icon="ri-table-2" />
</button> </button>
@ -501,14 +515,14 @@
class="modal fade cms-editor-insert-table-dialog" class="modal fade cms-editor-insert-table-dialog"
id="insert-table-dialog" id="insert-table-dialog"
tabindex="-1" tabindex="-1"
> >
<div class="modal-dialog"> <div class="modal-dialog">
<form class="modal-content"> <form class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 <h4
class="modal-title" class="modal-title"
id="insert-table-dialog-title" id="insert-table-dialog-title"
> >
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']} #{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
</h4> </h4>
<button <button
@ -516,7 +530,7 @@
class="close" class="close"
data-dismiss="modal" data-dismiss="modal"
type="button" type="button"
> >
<bootstrap:svgIcon icon="x" /> <bootstrap:svgIcon icon="x" />
</button> </button>
</div> </div>
@ -526,30 +540,30 @@
inputId="rows" inputId="rows"
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}" label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
name="rows" name="rows"
/> />
<bootstrap:formGroupNumber <bootstrap:formGroupNumber
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}" help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
inputId="cols" inputId="cols"
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}" label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
name="cols" name="cols"
/> />
<bootstrap:formCheck <bootstrap:formCheck
checked="true" checked="true"
inputId="headerRow" inputId="headerRow"
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}" label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
name="headerRow" name="headerRow"
value="true" value="true"
/> />
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button <button
class=" class="
btn btn-warning btn btn-warning
cms-editor-cancel-button cms-editor-cancel-button
" "
data-dismiss="modal" data-dismiss="modal"
type="button" type="button"
> >
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']} #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
</button> </button>
<button <button
@ -557,7 +571,7 @@
data-dismiss="modal" data-dismiss="modal"
data-backdrop="false" data-backdrop="false"
type="submit" type="submit"
> >
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']} #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
</button> </button>
</div> </div>
@ -568,23 +582,23 @@
class="btn btn-outline-dark tiptap-remove-table" class="btn btn-outline-dark tiptap-remove-table"
title="#{CmsAdminMessage['cms_editor.buttons.remove_table']}" title="#{CmsAdminMessage['cms_editor.buttons.remove_table']}"
type="button" type="button"
> >
<img src="#{request.contextPath}/icons/cms-editor/table-remove.svg" /> <img src="#{request.contextPath}/icons/cms-editor/table-remove.svg" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-insert-table-row-before" class="btn btn-outline-dark tiptap-insert-table-row-before"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_before']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_before']}"
type="button" type="button"
> >
<!--<img src="#{request.contextPath}/icons/cms-editor/table-add-row-before.svg" />--> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-row-before.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-row-top" /> <librecms:remixSvgIcon icon="ri-insert-row-top" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-insert-table-row-after" class="btn btn-outline-dark tiptap-insert-table-row-after"
title="#{CmsAdminMessages['cms_editor.buttons.insert_table_row_after']}" title="#{CmsAdminMessages['cms_editor.buttons.insert_table_row_after']}"
type="button" type="button"
> >
<!--<img src="#{request.contextPath}/icons/cms-editor/table-add-row-after.svg" />--> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-row-after.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-row-bottom" /> <librecms:remixSvgIcon icon="ri-insert-row-bottom" />
</button> </button>
<button <button
@ -598,24 +612,24 @@
class="btn btn-outline-dark tiptap-insert-table-column-before" class="btn btn-outline-dark tiptap-insert-table-column-before"
title="#{CmsAdminMessages['cms_editor.buttons.insert_table_column_before']}" title="#{CmsAdminMessages['cms_editor.buttons.insert_table_column_before']}"
type="button" type="button"
> >
<!--<img src="#{request.contextPath}/icons/cms-editor/table-add-column-before.svg" />--> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-column-before.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-column-left" /> <librecms:remixSvgIcon icon="ri-insert-column-left" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-insert-table-column-after" class="btn btn-outline-dark tiptap-insert-table-column-after"
title="#{CmsAdminMessages['cms_editor.buttons.insert_table_column_after']}" title="#{CmsAdminMessages['cms_editor.buttons.insert_table_column_after']}"
type="button" type="button"
> >
<!--<img src="#{request.contextPath}/icons/cms-editor/table-add-column-after.svg" />--> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-column-after.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-column-right" /> <librecms:remixSvgIcon icon="ri-insert-column-right" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-remove-table-column" class="btn btn-outline-dark tiptap-remove-table-column"
title="#{CmsAdminMessages['cms_editor.buttons.remove_table_column']}" title="#{CmsAdminMessages['cms_editor.buttons.remove_table_column']}"
type="button" type="button"
> >
<!--<img src="#{request.contextPath}/icons/cms-editor/table-remove-column.svg" />--> <!--<img src="#{request.contextPath}/icons/cms-editor/table-remove-column.svg" />-->
<librecms:remixSvgIcon icon="ri-delete-column" /> <librecms:remixSvgIcon icon="ri-delete-column" />
</button> </button>
<button <button
@ -655,6 +669,20 @@
</button> </button>
</div> </div>
</div> </div>
<template id="librecms-image-node-view-row">
<tr>
<td class="col-name"></td>
<td class="col-type"></td>
<td class="col-action">
<button class="btn btn-primary"
data-assetuuid=""
data-dismiss="modal"
type="button">
#{CmsAssetsStepsDefaultMessagesBundle['assetpicker.select']}
</button>
</td>
</tr>
</template>
<template id="librecms-image-node-view"> <template id="librecms-image-node-view">
<figure> <figure>
<!--img src="#{request.contextPath}/assets/remixicon/image-line.svg" />--> <!--img src="#{request.contextPath}/assets/remixicon/image-line.svg" />-->
@ -662,10 +690,59 @@
src="" src=""
style="min-height: 4em;" /> style="min-height: 4em;" />
<div class="border-light librecms-image-node-view-buttons"> <div class="border-light librecms-image-node-view-buttons">
<button class="btn btn-outline-dark select-image-button"> <button class="btn btn-outline-dark select-image-button"
data-toggle="modal"
data-target="#librecms-imge-node-select-image-dialog-">
<librecms:remixSvgIcon icon="ri-image-edit-line" /> <librecms:remixSvgIcon icon="ri-image-edit-line" />
<span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}</span> <span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.select_image.label']}</span>
</button> </button>
<div aria-hidden="true"
aria-labelledby="librecms-image-node-select-image-dialog-title-"
class="modal fade select-image-dialog ccm-cms-asset-picker"
id="librecms-image-node-select-image-dialog-"
tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"
id="librecms-image-node-select-image-dialog-title-">
#{CmsAdminMessages['cms_editor.image_node_view.selectimage.dialog.title']}
<button aria-label="#{CmsAdminMessages['cms_editor.image_node_view.selectimage.dialog.close']}"
class="close"
data-dismiss="modal"
type="button">
<bootstrap:svgIcon icon="x-circle" />
</button>
</h3>
</div>
<div class="modal-body">
<bootstrap:formGroupText
class="assetpicker-filter"
help="#{CmsAssetsStepsDefaultMessagesBundle['assetpicker.filter.help']}"
inputId="#{cc.attrs.assetPickerId}-filter"
label="#{CmsAssetsStepsDefaultMessagesBundle['assetpicker.filter.label']}"
name="" />
<table>
<thead>
<tr>
<th>#{CmsAssetsStepsDefaultMessagesBundle['assetpicker.column.name']}</th>
<th>#{CmsAssetsStepsDefaultMessagesBundle['assetpicker.column.type']}</th>
<th>#{CmsAssetsStepsDefaultMessagesBundle['assetpicker.column.action']}</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-warning"
data-dismiss="modal"
type="button">
#{CmsAdminMessages['cms_editor.image_node_view.selectimage.dialog.close']}
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-outline-dark image-settings-button" <button class="btn btn-outline-dark image-settings-button"
data-toggle="modal" data-toggle="modal"
data-target="#librecms-image-node-view-settings-dialog-"> data-target="#librecms-image-node-view-settings-dialog-">
@ -754,6 +831,10 @@
</form> </form>
</div> </div>
</div> </div>
<!--<button class="btn btn-outline-dark image-remove-button">
<librecms:remixSvgIcon icon="ri-close-line" />
<span class="sr-only">#{CmsAdminMessages['cms_editor.image_node_view.remove.label']}</span>
</button>-->
</div> </div>
<figcaption aria-label="#{CmsAdminMessages['cms_editor.image_node_view.figcaption.label']}" <figcaption aria-label="#{CmsAdminMessages['cms_editor.image_node_view.figcaption.label']}"
contenteditable="true"> contenteditable="true">
@ -765,19 +846,19 @@
class="cms-tiptap-editor-canvas border" class="cms-tiptap-editor-canvas border"
data-locale="#{cc.attrs.selectedLocale}" data-locale="#{cc.attrs.selectedLocale}"
data-variant-url="#{cc.attrs.variantUrl}" data-variant-url="#{cc.attrs.variantUrl}"
></div> ></div>
<div class="mt-3"> <div class="mt-3">
<a <a
class="btn btn-warning cms-editor-cancel-button" class="btn btn-warning cms-editor-cancel-button"
href="#{backUrl}" href="#{backUrl}"
> >
#{cc.attrs.editDialogCancelLabel} #{cc.attrs.editDialogCancelLabel}
</a> </a>
<button <button
class="btn btn-success cms-editor-save-button" class="btn btn-success cms-editor-save-button"
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}" disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
type="button" type="button"
> >
#{cc.attrs.editDialogSubmitLabel} #{cc.attrs.editDialogSubmitLabel}
</button> </button>
</div> </div>

2
ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/edit.xhtml
View File

@ -20,7 +20,9 @@
<c:if test="#{CmsArticleTextBodyStep.canEdit}"> <c:if test="#{CmsArticleTextBodyStep.canEdit}">
<librecms:cmsEditor <librecms:cmsEditor
backUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text" backUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text"
baseUrl="#{mvc.basePath}"
canEdit="#{CmsArticleTextBodyStep.canEdit}" canEdit="#{CmsArticleTextBodyStep.canEdit}"
contentSection="#{ContentSectionModel.sectionName}"
editMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit" editMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit"
editorId="cms-article-text-editor" editorId="cms-article-text-editor"
objectIdentifier="#{CmsSelectedDocumentModel.itemPath}" objectIdentifier="#{CmsSelectedDocumentModel.itemPath}"

3
ccm-cms/src/main/resources/org/librecms/CmsAdminMessages.properties
View File

@ -890,3 +890,6 @@ cms_editor.image_node_view.settings.dialog.fullsizeoverlay.help=Enables a fullsi
cms_editor.image_node_view.settings.dialog.save=Submit cms_editor.image_node_view.settings.dialog.save=Submit
cms_editor.image_node_view.figcaption.label=Caption cms_editor.image_node_view.figcaption.label=Caption
cms_editor.image_node_view.figcaption.placeholder=Caption cms_editor.image_node_view.figcaption.placeholder=Caption
cms_editor.image_node_view.selectimage.dialog.title=Select image
cms_editor.image_node_view.selectimage.dialog.close=Cancel
cms_editor.image_node_view.remove.label=Remove image

3
ccm-cms/src/main/resources/org/librecms/CmsAdminMessages_de.properties
View File

@ -891,3 +891,6 @@ cms_editor.image_node_view.settings.dialog.fullsizeoverlay.help=Aktiviert ein Gr
cms_editor.image_node_view.settings.dialog.save=\u00dcbernehmen cms_editor.image_node_view.settings.dialog.save=\u00dcbernehmen
cms_editor.image_node_view.figcaption.label=Bildunterschrift cms_editor.image_node_view.figcaption.label=Bildunterschrift
cms_editor.image_node_view.figcaption.placeholder=Bildunterschrift cms_editor.image_node_view.figcaption.placeholder=Bildunterschrift
cms_editor.image_node_view.selectimage.dialog.title=Bild ausw\u00e4hlen
cms_editor.image_node_view.selectimage.dialog.close=Abbrechen
cms_editor.image_node_view.remove.label=Bild entfernen

74
ccm-cms/src/main/scss/content-sections/_custom.scss
View File

@ -134,6 +134,7 @@ table.wor{
.cms-tiptap-editor-canvas { .cms-tiptap-editor-canvas {
max-height: 75vh; max-height: 75vh;
min-height: 35vh;
overflow: scroll; overflow: scroll;
} }
@ -144,9 +145,76 @@ table.wor{
position: relative; position: relative;
.librecms-image-node-view-buttons { .librecms-image-node-view-buttons {
background-color: rgba(255,255,255,0.5);
position: absolute; position: absolute;
top: 0; top: 0.5rem;
right: 0; right: 0.5rem;
width: 3em;
width: 2.66rem;
& > button {
width: 2.66rem;
}
}
&.librecms-image-node-width-25 {
width: 25%;
}
&.librecms-image-node-width-33 {
width: 33%;
}
&.librecms-image-node-width-50 {
width: 50%;
}
&.librecms-image-node-width-66 {
width: 66%;
}
&.librecms-image-node-width-75 {
width: 75%;
}
&.librecms-image-node-width-100 {
width: 100%;
}
&.librecms-image-node-align-floatleft {
float: left;
}
&.librecms-image-node-align-center {
margin-left: auto;
margin-right: auto;
}
&.librecms-image-node-align-floatright {
float: right;
}
figure img {
max-width: 100%;
}
.select-image-dialog {
table {
border: none;
width: 100%;
thead th {
text-align: center;
}
thead tr, tbody tr:nth-child(even) {
background-color: #ededed;
}
tr, th, td {
border: none
}
}
} }
} }

2
ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts
View File

@ -16,7 +16,7 @@ async function initAssetPicker(assetPickerElem: Element) {
console.log(`assetPickerId = ${assetPickerId}`); console.log(`assetPickerId = ${assetPickerId}`);
const fetchUrl = `${baseUrl}/content-sections/${contentSection}/assets?type=${assetType}`; const fetchUrl = `/content-sections/${contentSection}/assets?type=${assetType}`;
try { try {
const response = await fetch(fetchUrl); const response = await fetch(fetchUrl);

15
ccm-cms/src/main/typescript/content-sections/cms-editor.ts
View File

@ -341,9 +341,9 @@ const BUTTONS: CmsEditorButton[] = [
const headerRowInput = dialog.querySelector( const headerRowInput = dialog.querySelector(
"input#headerRow" "input#headerRow"
) as HTMLInputElement; ) as HTMLInputElement;
console.log(`rowsInput = ${rowsInput}`); // console.log(`rowsInput = ${rowsInput}`);
console.log(`colsInput = ${colsInput}`); // console.log(`colsInput = ${colsInput}`);
console.log(`headerRowInput = ${headerRowInput}`); // console.log(`headerRowInput = ${headerRowInput}`);
const rows = parseInt(rowsInput.value, 10); const rows = parseInt(rowsInput.value, 10);
const cols = parseInt(colsInput.value, 10); const cols = parseInt(colsInput.value, 10);
const headerRow = JSON.parse(headerRowInput.value) as Boolean; const headerRow = JSON.parse(headerRowInput.value) as Boolean;
@ -555,6 +555,7 @@ const BUTTONS: CmsEditorButton[] = [
.chain() .chain()
.focus() .focus()
.setLibreCmsImage() .setLibreCmsImage()
.insertContent("<p></p>")
.run(); .run();
}, },
can: (cmsEditor) => { can: (cmsEditor) => {
@ -598,7 +599,7 @@ class CmsEditor {
this.editorElem = editorElem; this.editorElem = editorElem;
this.saveUrl = saveUrl; this.saveUrl = saveUrl;
console.log("initializing editor buttons"); // console.log("initializing editor buttons");
const buttonsElem = editorElem.querySelector( const buttonsElem = editorElem.querySelector(
".cms-tiptap-editor-buttons" ".cms-tiptap-editor-buttons"
); );
@ -620,7 +621,7 @@ class CmsEditor {
} }
editor.on("selectionUpdate", ({ editor }: { editor: Editor }) => { editor.on("selectionUpdate", ({ editor }: { editor: Editor }) => {
console.log(`checkButton - this.editorElem = ${this.editorElem}`); // console.log(`checkButton - this.editorElem = ${this.editorElem}`);
const buttonsElem = editorElem.querySelector( const buttonsElem = editorElem.querySelector(
".cms-tiptap-editor-buttons" ".cms-tiptap-editor-buttons"
); );
@ -642,7 +643,7 @@ class CmsEditor {
} }
}); });
console.log(`editorElem = ${editorElem}`); // console.log(`editorElem = ${editorElem}`);
const saveButton = editorElem.querySelector(".cms-editor-save-button"); const saveButton = editorElem.querySelector(".cms-editor-save-button");
saveButton?.addEventListener("click", (event) => this.save(event)); saveButton?.addEventListener("click", (event) => this.save(event));
@ -716,7 +717,7 @@ class CmsEditorBuilder {
} }
public async buildEditor(): Promise<CmsEditor> { public async buildEditor(): Promise<CmsEditor> {
console.log("Build CMS Editor."); // console.log("Build CMS Editor.");
const canvasElement = this.editorElem.querySelector( const canvasElement = this.editorElem.querySelector(
".cms-tiptap-editor-canvas" ".cms-tiptap-editor-canvas"
); );

259
ccm-cms/src/main/typescript/content-sections/cms-editor/image-node/image-node.ts
View File

@ -1,4 +1,5 @@
import { Node, nodeInputRule, mergeAttributes } from "@tiptap/core"; import { Node, nodeInputRule, mergeAttributes, Range } from "@tiptap/core";
import { Node as ProsemirrorNode } from "prosemirror-model";
declare module "@tiptap/core" { declare module "@tiptap/core" {
interface Commands<ReturnType> { interface Commands<ReturnType> {
@ -64,6 +65,16 @@ export const ImageNode = Node.create({
} }
}, },
}, },
imgSrc: {
parseHTML: (element) => {
const imgElem = element.querySelector("img");
if (imgElem) {
return imgElem.src;
} else {
return "";
}
},
},
size: { size: {
parseHTML: (element) => { parseHTML: (element) => {
if (element.hasAttribute("data-size")) { if (element.hasAttribute("data-size")) {
@ -121,32 +132,101 @@ export const ImageNode = Node.create({
// console.log(`extension = ${extension}`); // console.log(`extension = ${extension}`);
// console.dir(extension); // console.dir(extension);
const dom = document.createElement("div");
dom.classList.add("librecms-image-node-view", "p-2");
if (!node.attrs.size) {
node.attrs.size = "50";
}
dom.classList.add(`librecms-image-node-width-${node.attrs.size}`);
if (!node.attrs.align) {
node.attrs.align = "center";
}
dom.classList.add(`librecms-image-node-align-${node.attrs.align}`);
const template = templateNode as HTMLTemplateElement; const template = templateNode as HTMLTemplateElement;
const nodeView = template.content.cloneNode(true) as HTMLElement; const nodeView = template.content.cloneNode(true) as HTMLElement;
const imgElem = nodeView.querySelector("img");
const dialogIdNr = Math.floor(Math.random() * 1000000000); const dialogIdNr = Math.floor(Math.random() * 1000000000);
const dialogId = `librecms-image-node-view-settings-dialog-${dialogIdNr}`;
const dialogTitleId = `${dialogId}-title`; const selectDialogId = `librecms-image-node-select-image-dialog-title-${dialogIdNr}`;
const selectDialogTitleId = `librecms-image-node-select-image-dialog-title-${dialogIdNr}-title`;
const selectButtonElem = nodeView.querySelector(
".select-image-button"
);
if (selectButtonElem) {
selectButtonElem.setAttribute(
"data-target",
`#${selectDialogId}`
);
}
const selectDialogElem = nodeView.querySelector(
".modal.select-image-dialog"
);
if (selectDialogElem) {
selectDialogElem.id = selectDialogId;
selectDialogElem.setAttribute(
"aria-labelledby",
selectDialogTitleId
);
const selectDialogTitleElem =
selectDialogElem.querySelector(".modal-title");
if (selectDialogTitleElem) {
selectDialogTitleElem.id = selectDialogTitleId;
}
const selectDialogIds =
selectDialogElem.querySelectorAll("*[id]");
selectDialogIds.forEach((elemWithId) => {
elemWithId.id = `${elemWithId.id}-${dialogIdNr}`;
});
const selectDialogLabels =
selectDialogElem.querySelectorAll("*[for]");
selectDialogLabels.forEach((label) => {
label.setAttribute(
"for",
`${label.getAttribute("for")}-${dialogIdNr}`
);
});
const describedElems = selectDialogElem.querySelectorAll(
"*[aria-describedby]"
);
describedElems.forEach((describedElem) => {
describedElem.setAttribute(
"aria-describedby",
`${describedElem.getAttribute(
"aria-describedby"
)}-${dialogIdNr}`
);
});
}
const settingsDialogId = `librecms-image-node-view-settings-dialog-${dialogIdNr}`;
const settingsDialogTitleId = `${settingsDialogId}-title`;
const settingsButtonElem = nodeView.querySelector( const settingsButtonElem = nodeView.querySelector(
".image-settings-button" ".image-settings-button"
); );
if (settingsButtonElem) { if (settingsButtonElem) {
settingsButtonElem.setAttribute("data-target", `#${dialogId}`); settingsButtonElem.setAttribute(
"data-target",
`#${settingsDialogId}`
);
} }
const settingsDialogElem = nodeView.querySelector( const settingsDialogElem = nodeView.querySelector(
".modal.image-settings-dialog" ".modal.image-settings-dialog"
); );
if (settingsDialogElem) { if (settingsDialogElem) {
settingsDialogElem.id = dialogId; settingsDialogElem.id = settingsDialogId;
settingsDialogElem.setAttribute( settingsDialogElem.setAttribute(
"aria-labelledby", "aria-labelledby",
dialogTitleId settingsDialogTitleId
); );
const settingsDialogTitleElem = const settingsDialogTitleElem =
settingsDialogElem.querySelector(".modal-title"); settingsDialogElem.querySelector(".modal-title");
if (settingsDialogTitleElem) { if (settingsDialogTitleElem) {
settingsDialogTitleElem.id = dialogTitleId; settingsDialogTitleElem.id = settingsDialogTitleId;
} }
const settingDialogIds = const settingDialogIds =
@ -245,6 +325,9 @@ export const ImageNode = Node.create({
const inputElem = altTextInput as HTMLInputElement; const inputElem = altTextInput as HTMLInputElement;
if (altTextInput) { if (altTextInput) {
node.attrs.altText = inputElem.value; node.attrs.altText = inputElem.value;
if (imgElem) {
imgElem.alt = inputElem.value;
}
} else { } else {
console.warn("Input for alt text not found."); console.warn("Input for alt text not found.");
} }
@ -253,6 +336,15 @@ export const ImageNode = Node.create({
const selectElem = alignSelect as HTMLSelectElement; const selectElem = alignSelect as HTMLSelectElement;
node.attrs.align = node.attrs.align =
selectElem.selectedOptions.item(0)?.value; selectElem.selectedOptions.item(0)?.value;
["floatleft", "center", "floatright"].forEach(
(align) =>
dom.classList.remove(
`librecms-image-node-align-${align}`
)
);
dom.classList.add(
`librecms-image-node-align-${node.attrs.align}`
);
} else { } else {
console.warn( console.warn(
"Select for image alignment not found." "Select for image alignment not found."
@ -263,6 +355,15 @@ export const ImageNode = Node.create({
const selectElem = sizeSelect as HTMLSelectElement; const selectElem = sizeSelect as HTMLSelectElement;
node.attrs.size = node.attrs.size =
selectElem.selectedOptions.item(0)?.value; selectElem.selectedOptions.item(0)?.value;
["25", "33", "50", "66", "75", "100"].forEach(
(size) =>
dom.classList.remove(
`librecms-image-node-width-${size}`
)
);
dom.classList.add(
`librecms-image-node-width-${node.attrs.size}`
);
} else { } else {
console.warn("Select for image size not found."); console.warn("Select for image size not found.");
} }
@ -282,16 +383,43 @@ export const ImageNode = Node.create({
"Submit button for image settings dialog not found." "Submit button for image settings dialog not found."
); );
} }
// const removeImageButton = nodeView.querySelector(
// ".image-remove-button"
// );
// if (removeImageButton) {
// removeImageButton.addEventListener("click", (event) => {
// if (typeof getPos === "number") {
// const from = getPos as number;
// const range: Range = {
// from,
// to: node.nodeSize,
// };
// editor.chain().focus().deleteRange(range);
// }
// });
// } else {
// console.error("removeImageButton not found.");
// }
} }
const figCaptionElem = nodeView.querySelector("figcaption"); const figCaptionElem = nodeView.querySelector("figcaption");
if (node.attrs.figCaption !== "" && figCaptionElem) { if (node.attrs.figCaption !== "" && figCaptionElem) {
figCaptionElem.innerHTML = node.attrs.figCaption; figCaptionElem.innerHTML = node.attrs.figCaption;
} }
const dom = document.createElement("div");
dom.classList.add("librecms-image-node-view", "p-2");
dom.appendChild(nodeView); dom.appendChild(nodeView);
if (selectButtonElem) {
if (imgElem) {
selectButtonElem.addEventListener("click", (event) =>
loadImages(event, node, imgElem)
);
} else {
console.error("img elem not found.");
}
}
return { return {
dom, dom,
}; };
@ -307,11 +435,11 @@ export const ImageNode = Node.create({
}, },
renderHTML({ node, HTMLAttributes }) { renderHTML({ node, HTMLAttributes }) {
console.log("node = "); // console.log("node = ");
console.dir(node); // console.dir(node);
return [ return [
"figure", "figure",
mergeAttributes(HTMLAttributes, { mergeAttributes({
"data-align": node.attrs.align, "data-align": node.attrs.align,
"data-fullsizeoverlay": node.attrs.fullSizeOverlay, "data-fullsizeoverlay": node.attrs.fullSizeOverlay,
"data-size": node.attrs.size, "data-size": node.attrs.size,
@ -321,10 +449,115 @@ export const ImageNode = Node.create({
"img", "img",
{ {
alt: node.attrs.altText, alt: node.attrs.altText,
src: "/assets/remixicon/image-line.svg", src: node.attrs.imgSrc,
}, },
], ],
["figcaption"], ["figcaption"],
]; ];
}, },
}); });
function loadImages(
event: Event,
node: ProsemirrorNode<any>,
imgElem: HTMLImageElement
) {
console.log("Loading images...");
const eventTarget = event.currentTarget as HTMLElement;
const editorElem = document.querySelector(".cms-editor");
if (!editorElem) {
return;
}
const baseUrl = editorElem.getAttribute("data-baseUrl");
const contentSection = editorElem.getAttribute("data-contentsection");
const dialogId = eventTarget.getAttribute("data-target");
if (!dialogId) {
console.error("data-target attribute is missing.");
return;
}
const dialog = document.querySelector(dialogId);
if (!dialog) {
console.error("dialog element not found is missing.");
return;
}
const rowTemplateResult = document.querySelector(
"#librecms-image-node-view-row"
);
if (!rowTemplateResult) {
console.error("template for result row not found.");
return;
}
const rowTemplate = rowTemplateResult as HTMLTemplateElement;
const table = dialog.querySelector("table");
if (!table) {
console.error("result table not found.");
return;
}
const tableBody = table.querySelector("tbody");
if (!tableBody) {
console.error("table body not found.");
return;
}
tableBody.innerHTML = "";
const fetchUrl = `/content-sections/${contentSection}/assets?type=org.librecms.assets.Image`;
fetch(fetchUrl)
.then((response) => {
if (response.ok) {
response
.json()
.then((data) => {
const images = data as [];
for (const image of images) {
const row = rowTemplate.content.cloneNode(
true
) as Element;
const colName = row.querySelector(".col-name");
const colType = row.querySelector(".col-type");
const selectButton =
row.querySelector(".col-action button");
if (colName) {
colName.textContent = image["name"];
}
if (colType) {
colType.textContent = image["name"];
}
if (selectButton) {
selectButton.setAttribute(
"data-imageuuid",
image["uuid"]
);
selectButton.addEventListener(
"click",
(event) => {
const imgUrl = `/content-sections/info/images/uuid-${image["uuid"]}`;
node.attrs.imgSrc = imgUrl;
if (imgElem) {
imgElem.src = imgUrl;
} else {
console.error(
"img element not found."
);
}
}
);
}
tableBody.appendChild(row);
}
})
.catch((error) => {
console.error(error);
});
} else {
console.error(
`Error. Status: ${response.status}. Status Text: ${response.statusText}`
);
}
})
.catch((error) => {
console.error(error);
});
}