Restructured text editor
parent
3f8f44e2e7
commit
05862f81eb
|
|
@ -7,7 +7,7 @@
|
||||||
"build": "npm-run-all build:*:*",
|
"build": "npm-run-all build:*:*",
|
||||||
"build:ccm-admin:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-admin.ts",
|
"build:ccm-admin:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-admin.ts",
|
||||||
"build:ccm-admin:css": "sass src/main/scss/content-sections/cms-admin.scss target/generated-resources/assets/@content-sections/cms-admin.css",
|
"build:ccm-admin:css": "sass src/main/scss/content-sections/cms-admin.scss target/generated-resources/assets/@content-sections/cms-admin.css",
|
||||||
"build:cms-editor:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/cms-editor.ts"
|
"build:cms-article-text:js": "parcel build --target --dist-dir target/generated-resources/assets/@content-sections src/main/typescript/content-sections/article-text-step.ts"
|
||||||
},
|
},
|
||||||
"author": "Jens Pelzetter",
|
"author": "Jens Pelzetter",
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
|
|
|
||||||
|
|
@ -287,7 +287,13 @@
|
||||||
/>-->
|
/>-->
|
||||||
</cc:interface>
|
</cc:interface>
|
||||||
<cc:implementation>
|
<cc:implementation>
|
||||||
<div class="cms-editor" id="#{cc.attrs.editorId}">
|
<div
|
||||||
|
class="cms-editor"
|
||||||
|
data-locale="#{cc.attrs.selectedLocale}"
|
||||||
|
data-save-url="#{cc.attrs.editMethod}/#{variant.locale}"
|
||||||
|
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
|
||||||
|
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>
|
||||||
|
|
@ -312,6 +318,11 @@
|
||||||
</c:otherwise>
|
</c:otherwise>
|
||||||
</c:choose>
|
</c:choose>
|
||||||
<div class="cms-editor-messages">
|
<div class="cms-editor-messages">
|
||||||
|
<template id="cms-editor-msg-canvas-element-not-found">
|
||||||
|
<div class="alert alert alert-danger" role="alert">
|
||||||
|
#{CmsAdminMessages['cms_editor.internal_error']}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<template id="cms-editor-msg-save-failed">
|
<template id="cms-editor-msg-save-failed">
|
||||||
<div class="alert alert alert-danger" role="alert">
|
<div class="alert alert alert-danger" role="alert">
|
||||||
#{cc.attrs.messageSaveFailed}
|
#{cc.attrs.messageSaveFailed}
|
||||||
|
|
@ -328,426 +339,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<!-- <c:if test="#{cc.attrs.hasUnusedLocales}">
|
|
||||||
<div class="mb-2">
|
|
||||||
<div class="text-right">
|
|
||||||
<button
|
|
||||||
class="btn btn-secondary"
|
|
||||||
data-target="##{cc.attrs.editorId}-dialog"
|
|
||||||
data-toggle="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="plus-circle" />
|
|
||||||
<span> #{cc.attrs.addButtonLabel} </span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
aria-labelledby="#{cc.attrs.editorId}-dialog-title"
|
|
||||||
aria-hidden="true"
|
|
||||||
class="modal fade"
|
|
||||||
id="#{cc.attrs.editorId}-dialog"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<form
|
|
||||||
action="#{cc.attrs.addMethod}"
|
|
||||||
class="modal-content"
|
|
||||||
method="post"
|
|
||||||
>
|
|
||||||
<div class="modal-header">
|
|
||||||
<c:choose>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 1}"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
class="modal-title"
|
|
||||||
id="#{cc.attrs.editorId}-dialog-title"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogTitle}
|
|
||||||
</h2>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 2}"
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
class="modal-title"
|
|
||||||
id="#{cc.attrs.editorId}-dialog-title"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogTitle}
|
|
||||||
</h3>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 3}"
|
|
||||||
>
|
|
||||||
<h4
|
|
||||||
class="modal-title"
|
|
||||||
id="#{cc.attrs.editorId}-dialog-title"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogTitle}
|
|
||||||
</h4>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 4}"
|
|
||||||
>
|
|
||||||
<h5
|
|
||||||
class="modal-title"
|
|
||||||
id="#{cc.attrs.editorId}-dialog-title"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogTitle}
|
|
||||||
</h5>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 5}"
|
|
||||||
>
|
|
||||||
<h6
|
|
||||||
class="modal-title"
|
|
||||||
id="#{cc.attrs.editorId}-dialog-title"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogTitle}
|
|
||||||
</h6>
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise>
|
|
||||||
<div>
|
|
||||||
#{cc.attrs.addDialogTitle}
|
|
||||||
</div>
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
<button
|
|
||||||
aria-label="#{cc.attrs.addDialogCancelLabel}"
|
|
||||||
class="close"
|
|
||||||
data-dismiss="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">
|
|
||||||
<bootstrap:svgIcon icon="x" />
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="form-group">
|
|
||||||
<label
|
|
||||||
for="#{cc.attrs.editorId}-form-locale-select"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogLocaleSelectLabel}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
aria-describedby="#{cc.attrs.editorId}-form-locale-select-help"
|
|
||||||
id="#{cc.attrs.editorId}-form-locale-select"
|
|
||||||
name="locale"
|
|
||||||
required="true"
|
|
||||||
>
|
|
||||||
<c:forEach
|
|
||||||
items="#{cc.attrs.unusedLocales}"
|
|
||||||
var="locale"
|
|
||||||
>
|
|
||||||
<option value="#{locale}">
|
|
||||||
#{locale}
|
|
||||||
</option>
|
|
||||||
</c:forEach>
|
|
||||||
</select>
|
|
||||||
<small
|
|
||||||
class="form-text text-muted"
|
|
||||||
id="#{cc.attrs.editorId}-form-locale-select-help"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogLocaleSelectHelp}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
class="btn btn-secondary"
|
|
||||||
data-dismiss="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogCancelLabel}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary"
|
|
||||||
>
|
|
||||||
#{cc.attrs.addDialogSubmitLabel}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
<c:choose>
|
|
||||||
<c:when test="#{cc.attrs.values.isEmpty()}">
|
|
||||||
<p>#{cc.attrs.emptyText}</p>
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise>
|
|
||||||
<table class="cms-editor-variants table table-hover">
|
|
||||||
<thead class="thead-light">
|
|
||||||
<tr>
|
|
||||||
<th scope="col">
|
|
||||||
#{cc.attrs.tableLocaleHeading}
|
|
||||||
</th>
|
|
||||||
<th scope="col">
|
|
||||||
#{cc.attrs.tableWordCountHeading}
|
|
||||||
</th>
|
|
||||||
<th scope="col">
|
|
||||||
#{cc.attrs.tableActionsHeading}
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<c:forEach
|
|
||||||
items="#{cc.attrs.variants}"
|
|
||||||
var="variant"
|
|
||||||
>
|
|
||||||
<tr id="variant-#{variant.locale}">
|
|
||||||
<td>#{variant.locale}</td>
|
|
||||||
<td>
|
|
||||||
<span class="wordcount"
|
|
||||||
>#{variant.wordCount}</span
|
|
||||||
>
|
|
||||||
#{CmsAdminMessages['cms_editor.variants.wordcount']}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button
|
|
||||||
class="
|
|
||||||
btn btn-primary
|
|
||||||
cms-editor-view-button
|
|
||||||
"
|
|
||||||
data-view-dialog="#{cc.attrs.editorId}-view-dialog"
|
|
||||||
data-variant-url="#{cc.attrs.variantUrl}/#{variant.locale}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="eye" />
|
|
||||||
<span class="sr-only">
|
|
||||||
#{cc.attrs.viewButtonLabel}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<c:if test="#{cc.attrs.canEdit}">
|
|
||||||
<button
|
|
||||||
class="
|
|
||||||
btn btn-primary
|
|
||||||
cms-editor-edit-button
|
|
||||||
"
|
|
||||||
data-edit-dialog="#{cc.attrs.editorId}-edit-dialog"
|
|
||||||
data-locale="#{variant.locale}"
|
|
||||||
data-variant-url="#{cc.attrs.variantUrl}/#{variant.locale}"
|
|
||||||
data-save-url="#{cc.attrs.editMethod}/#{variant.locale}"
|
|
||||||
data-wordcount-url="#{cc.attrs.wordCountUrl}/#{variant.locale}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="pen" />
|
|
||||||
<span class="sr-only">
|
|
||||||
#{cc.attrs.editButtonLabel}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-danger"
|
|
||||||
data-target="##{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
|
|
||||||
data-toggle="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon
|
|
||||||
icon="x-circle"
|
|
||||||
/>
|
|
||||||
<span class="sr-only">
|
|
||||||
#{cc.attrs.removeButtonLabel}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<div
|
|
||||||
aria-describedby="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog-title"
|
|
||||||
aria-hidden="true"
|
|
||||||
class="modal fade"
|
|
||||||
data-backdrop="static"
|
|
||||||
id="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<form
|
|
||||||
action="#{cc.attrs.removeMethod}/#{variant.locale}"
|
|
||||||
class="modal-content"
|
|
||||||
method="post"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="modal-header"
|
|
||||||
>
|
|
||||||
<c:choose>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 1}"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
#{cc.attrs.removeDialogTitle}
|
|
||||||
</h2>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 2}"
|
|
||||||
>
|
|
||||||
<h3>
|
|
||||||
#{cc.attrs.removeDialogTitle}
|
|
||||||
</h3>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 3}"
|
|
||||||
>
|
|
||||||
<h4>
|
|
||||||
#{cc.attrs.removeDialogTitle}
|
|
||||||
</h4>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 4}"
|
|
||||||
>
|
|
||||||
<h5>
|
|
||||||
#{cc.attrs.removeDialogTitle}
|
|
||||||
</h5>
|
|
||||||
</c:when>
|
|
||||||
<c:when
|
|
||||||
test="#{cc.attrs.headingLevel == 5}"
|
|
||||||
>
|
|
||||||
<h6>
|
|
||||||
#{cc.attrs.removeDialogTitle}
|
|
||||||
</h6>
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise>
|
|
||||||
<div>
|
|
||||||
#{cc.attrs.removeDialogTitle}
|
|
||||||
</div>
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
<button
|
|
||||||
aria-label="#{cc.attrs.removeDialogCancelLabel}"
|
|
||||||
class="close"
|
|
||||||
data-dismiss="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
>×</span
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>
|
|
||||||
#{cc.attrs.removeDialogText}
|
|
||||||
</p>
|
|
||||||
<pre>
|
|
||||||
#{variant.locale}</pre
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
name="confirmed"
|
|
||||||
type="hidden"
|
|
||||||
value="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="modal-footer"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="
|
|
||||||
btn
|
|
||||||
btn-secondary
|
|
||||||
"
|
|
||||||
data-dismiss="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
#{cc.attrs.removeDialogCancelLabel}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="
|
|
||||||
btn
|
|
||||||
btn-danger
|
|
||||||
"
|
|
||||||
>
|
|
||||||
#{cc.attrs.removeDialogSubmitLabel}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</c:forEach>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
aria-describedby="#{cc.attrs.editorId}-view-dialog-title"
|
|
||||||
aria-hidden="true"
|
|
||||||
class="modal fade"
|
|
||||||
data-backdrop="static"
|
|
||||||
id="#{cc.attrs.editorId}-view-dialog"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<c:choose>
|
|
||||||
<c:when test="#{cc.attrs.headingLevel == 1}">
|
|
||||||
<h2 id="#{cc.attrs.editorId}-view-dialog-title">
|
|
||||||
#{cc.attrs.viewDialogTitle}
|
|
||||||
</h2>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="#{cc.attrs.headingLevel == 2}">
|
|
||||||
<h3 id="#{cc.attrs.editorId}-view-dialog-title">
|
|
||||||
#{cc.attrs.viewDialogTitle}
|
|
||||||
</h3>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="#{cc.attrs.headingLevel == 3}">
|
|
||||||
<h4 id="#{cc.attrs.editorId}-view-dialog-title">
|
|
||||||
#{cc.attrs.viewDialogTitle}
|
|
||||||
</h4>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="#{cc.attrs.headingLevel == 4}">
|
|
||||||
<h5 id="#{cc.attrs.editorId}-view-dialog-title">
|
|
||||||
#{cc.attrs.viewDialogTitle}
|
|
||||||
</h5>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="#{cc.attrs.headingLevel == 5}">
|
|
||||||
<h6 id="#{cc.attrs.editorId}-view-dialog-title">
|
|
||||||
#{cc.attrs.viewDialogTitle}
|
|
||||||
</h6>
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise>
|
|
||||||
<div
|
|
||||||
id="#{cc.attrs.editorId}-view-dialog-title"
|
|
||||||
>
|
|
||||||
#{cc.attrs.viewDialogTitle}
|
|
||||||
</div>
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
<button
|
|
||||||
aria-label="#{cc.attrs.viewDialogCancelLabel}"
|
|
||||||
class="close"
|
|
||||||
data-dismiss="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="x" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body"></div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
class="btn btn-secondary"
|
|
||||||
data-dismiss="modal"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
#{cc.attrs.viewDialogCloseButtonLabel}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
aria-describedby="#{cc.attrs.editorId}-edit-dialog-title"
|
|
||||||
aria-hidden="true"
|
|
||||||
class="modal fade"
|
|
||||||
data-backdrop="static"
|
|
||||||
id="#{cc.attrs.editorId}-edit-dialog"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">-->
|
|
||||||
<c:choose>
|
<c:choose>
|
||||||
<c:when test="#{cc.attrs.headingLevel == 1}">
|
<c:when test="#{cc.attrs.headingLevel == 1}">
|
||||||
<h2 id="#{cc.attrs.editorId}-edit-dialog-title">
|
<h2 id="#{cc.attrs.editorId}-edit-dialog-title">
|
||||||
|
|
@ -780,209 +371,184 @@ tabindex="-1"
|
||||||
</div>
|
</div>
|
||||||
</c:otherwise>
|
</c:otherwise>
|
||||||
</c:choose>
|
</c:choose>
|
||||||
<!-- <button
|
<div
|
||||||
aria-label="#{cc.attrs.editDialogCancelLabel}"
|
class="cms-tiptap-editor"
|
||||||
class="close"
|
data-locale="#{cc.attrs.selectedLocale}"
|
||||||
type="button"
|
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
|
||||||
>
|
>
|
||||||
<bootstrap:svgIcon icon="x" />
|
<div class="cms-tiptap-editor-buttons d-flex mb-1">
|
||||||
</button>-->
|
<div class="px-2 cms-tiptap-editor-textformatting">
|
||||||
</div>
|
|
||||||
<!--<div class="modal-body">-->
|
|
||||||
<div
|
|
||||||
class="cms-tiptap-editor"
|
|
||||||
data-locale="#{cc.attrs.selectedLocale}"
|
|
||||||
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
|
|
||||||
>
|
|
||||||
<div class="cms-tiptap-editor-buttons d-flex mb-1">
|
|
||||||
<div class="px-2 cms-tiptap-editor-textformatting">
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-dark tiptap-emph"
|
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="type-italic" />
|
|
||||||
<!-- <span class="sr-only">
|
|
||||||
#{CmsAdminMessages['cms_editor.buttons.emph']}
|
|
||||||
</span> -->
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-dark tiptap-strong-emph"
|
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="type-bold" />
|
|
||||||
<!-- <span class="sr-only">
|
|
||||||
#{CmsAdminMessages['cms_editor.buttons.strong_emph']}
|
|
||||||
</span> -->
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-dark tiptap-code"
|
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.code']}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="code" />
|
|
||||||
<!-- <span class="sr-only">
|
|
||||||
#{CmsAdminMessages['cms_editor.buttons.code']}
|
|
||||||
</span> -->
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-dark tiptap-strikethrough"
|
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<bootstrap:svgIcon icon="type-strikethrough" />
|
|
||||||
<!-- <span class="sr-only">
|
|
||||||
#{CmsAdminMessages['cms_editor.buttons.strikethrough']}
|
|
||||||
</span> -->
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-dark tiptap-subscript"
|
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">x<sub>n</sub></span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-dark tiptap-superscript"
|
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">x<sup>n</sup></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="px-2 cms-tiptap-editor-headings">
|
|
||||||
<ui:repeat begin="1" end="6" var="level">
|
|
||||||
<button
|
<button
|
||||||
class="btn btn-outline-dark tiptap-h#{level}"
|
class="btn btn-outline-dark tiptap-emph"
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
|
title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span aria-hidden="true">H#{level}</span>
|
<bootstrap:svgIcon icon="type-italic" />
|
||||||
</button>
|
</button>
|
||||||
</ui:repeat>
|
<button
|
||||||
<!-- <button class="btn btn-outline-dark tiptap-h2"
|
class="btn btn-outline-dark tiptap-strong-emph"
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.h2']}"
|
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
|
||||||
type="button">
|
type="button"
|
||||||
<bootstrap:svgIcon icon="type-h2" />
|
>
|
||||||
</button> -->
|
<bootstrap:svgIcon icon="type-bold" />
|
||||||
</div>
|
</button>
|
||||||
<div class="px-2 cms-tiptap-editor-paragraphs">
|
<button
|
||||||
<button
|
class="btn btn-outline-dark tiptap-code"
|
||||||
class="btn btn-outline-dark tiptap-paragraph"
|
title="#{CmsAdminMessages['cms_editor.buttons.code']}"
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
|
type="button"
|
||||||
type="button"
|
>
|
||||||
>
|
<bootstrap:svgIcon icon="code" />
|
||||||
<bootstrap:svgIcon icon="type" />
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
class="btn btn-outline-dark tiptap-strikethrough"
|
||||||
class="btn btn-outline-dark tiptap-blockquote"
|
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
|
type="button"
|
||||||
type="button"
|
>
|
||||||
>
|
<bootstrap:svgIcon icon="type-strikethrough" />
|
||||||
<bootstrap:svgIcon icon="blockquote-left" />
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
class="btn btn-outline-dark tiptap-subscript"
|
||||||
class="btn btn-outline-dark tiptap-codeblock"
|
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
|
type="button"
|
||||||
type="button"
|
>
|
||||||
>
|
<span aria-hidden="true">x<sub>n</sub></span>
|
||||||
<bootstrap:svgIcon icon="code-square" />
|
</button>
|
||||||
</button>
|
<button
|
||||||
</div>
|
class="btn btn-outline-dark tiptap-superscript"
|
||||||
<div class="px-2 cms-tiptap-editor-lists">
|
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
|
||||||
<button
|
type="button"
|
||||||
class="btn btn-outline-dark tiptap-ul"
|
>
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
|
<span aria-hidden="true">x<sup>n</sup></span>
|
||||||
type="button"
|
</button>
|
||||||
>
|
</div>
|
||||||
<bootstrap:svgIcon icon="list-ul" />
|
<div class="px-2 cms-tiptap-editor-headings">
|
||||||
</button>
|
<ui:repeat begin="1" end="6" var="level">
|
||||||
<button
|
<button
|
||||||
class="btn btn-outline-dark tiptap-ol"
|
class="btn btn-outline-dark tiptap-h#{level}"
|
||||||
title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
|
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<bootstrap:svgIcon icon="list-ol" />
|
<span aria-hidden="true">H#{level}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</ui:repeat>
|
||||||
<div class="px-2 cms-tiptap-editor-table">
|
</div>
|
||||||
<button
|
<div class="px-2 cms-tiptap-editor-paragraphs">
|
||||||
class="btn btn-outline-dark tiptap-insert-table"
|
<button
|
||||||
data-target="#insert-table-dialog"
|
class="btn btn-outline-dark tiptap-paragraph"
|
||||||
data-toggle="modal"
|
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
|
||||||
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
|
type="button"
|
||||||
type="button"
|
>
|
||||||
>
|
<bootstrap:svgIcon icon="type" />
|
||||||
<bootstrap:svgIcon icon="table" />
|
</button>
|
||||||
</button>
|
<button
|
||||||
<div
|
class="btn btn-outline-dark tiptap-blockquote"
|
||||||
aria-hidden="true"
|
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
|
||||||
aria-labelledby="insert-table-dialog-title"
|
type="button"
|
||||||
class="modal fade cms-editor-insert-table-dialog"
|
>
|
||||||
id="insert-table-dialog"
|
<bootstrap:svgIcon icon="blockquote-left" />
|
||||||
tabindex="-1"
|
</button>
|
||||||
>
|
<button
|
||||||
<div class="modal-dialog">
|
class="btn btn-outline-dark tiptap-codeblock"
|
||||||
<form class="modal-content">
|
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
|
||||||
<div class="modal-header">
|
type="button"
|
||||||
<h4
|
>
|
||||||
class="modal-title"
|
<bootstrap:svgIcon icon="code-square" />
|
||||||
id="insert-table-dialog-title"
|
</button>
|
||||||
>
|
</div>
|
||||||
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
|
<div class="px-2 cms-tiptap-editor-lists">
|
||||||
</h4>
|
<button
|
||||||
<button
|
class="btn btn-outline-dark tiptap-ul"
|
||||||
aria-label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}"
|
title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
|
||||||
class="close"
|
type="button"
|
||||||
data-dismiss="modal"
|
>
|
||||||
type="button"
|
<bootstrap:svgIcon icon="list-ul" />
|
||||||
>
|
</button>
|
||||||
<bootstrap:svgIcon icon="x" />
|
<button
|
||||||
</button>
|
class="btn btn-outline-dark tiptap-ol"
|
||||||
</div>
|
title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
|
||||||
<div class="modal-body">
|
type="button"
|
||||||
<bootstrap:formGroupNumber
|
>
|
||||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.help']}"
|
<bootstrap:svgIcon icon="list-ol" />
|
||||||
inputId="rows"
|
</button>
|
||||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
|
</div>
|
||||||
name="rows"
|
<div class="px-2 cms-tiptap-editor-table">
|
||||||
/>
|
<button
|
||||||
<bootstrap:formGroupNumber
|
class="btn btn-outline-dark tiptap-insert-table"
|
||||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
|
data-target="#insert-table-dialog"
|
||||||
inputId="cols"
|
data-toggle="modal"
|
||||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
|
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
|
||||||
name="cols"
|
type="button"
|
||||||
/>
|
>
|
||||||
<bootstrap:formCheck
|
<bootstrap:svgIcon icon="table" />
|
||||||
checked="true"
|
</button>
|
||||||
inputId="headerRow"
|
<div
|
||||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
|
aria-hidden="true"
|
||||||
name="headerRow"
|
aria-labelledby="insert-table-dialog-title"
|
||||||
value="true"
|
class="modal fade cms-editor-insert-table-dialog"
|
||||||
/>
|
id="insert-table-dialog"
|
||||||
</div>
|
tabindex="-1"
|
||||||
<div class="modal-footer">
|
>
|
||||||
<button
|
<div class="modal-dialog">
|
||||||
class="
|
<form class="modal-content">
|
||||||
btn btn-warning
|
<div class="modal-header">
|
||||||
cms-editor-cancel-button
|
<h4
|
||||||
"
|
class="modal-title"
|
||||||
data-dismiss="modal"
|
id="insert-table-dialog-title"
|
||||||
type="button"
|
>
|
||||||
>
|
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
|
||||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
|
</h4>
|
||||||
</button>
|
<button
|
||||||
<button
|
aria-label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}"
|
||||||
class="btn btn-success"
|
class="close"
|
||||||
data-dismiss="modal"
|
data-dismiss="modal"
|
||||||
data-backdrop="false"
|
type="button"
|
||||||
type="submit"
|
>
|
||||||
>
|
<bootstrap:svgIcon icon="x" />
|
||||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
<div class="modal-body">
|
||||||
</form>
|
<bootstrap:formGroupNumber
|
||||||
|
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.help']}"
|
||||||
|
inputId="rows"
|
||||||
|
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
|
||||||
|
name="rows"
|
||||||
|
/>
|
||||||
|
<bootstrap:formGroupNumber
|
||||||
|
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
|
||||||
|
inputId="cols"
|
||||||
|
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
|
||||||
|
name="cols"
|
||||||
|
/>
|
||||||
|
<bootstrap:formCheck
|
||||||
|
checked="true"
|
||||||
|
inputId="headerRow"
|
||||||
|
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
|
||||||
|
name="headerRow"
|
||||||
|
value="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button
|
||||||
|
class="
|
||||||
|
btn btn-warning
|
||||||
|
cms-editor-cancel-button
|
||||||
|
"
|
||||||
|
data-dismiss="modal"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-success"
|
||||||
|
data-dismiss="modal"
|
||||||
|
data-backdrop="false"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-outline-dark tiptap-insert-table-row"
|
class="btn btn-outline-dark tiptap-insert-table-row"
|
||||||
|
|
@ -993,32 +559,27 @@ tabindex="-1"
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
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>-->
|
<a
|
||||||
<!--<div class="modal-footer">-->
|
class="btn btn-warning cms-editor-cancel-button"
|
||||||
<div class="mt-3">
|
href="#{backUrl}"
|
||||||
<a
|
>
|
||||||
class="btn btn-warning cms-editor-cancel-button"
|
#{cc.attrs.editDialogCancelLabel}
|
||||||
href="#{backUrl}"
|
</a>
|
||||||
>
|
<button
|
||||||
#{cc.attrs.editDialogCancelLabel}
|
class="btn btn-success cms-editor-save-button"
|
||||||
</a>
|
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
|
||||||
<button
|
type="button"
|
||||||
class="btn btn-success cms-editor-save-button"
|
>
|
||||||
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
|
#{cc.attrs.editDialogSubmitLabel}
|
||||||
type="button"
|
</button>
|
||||||
>
|
</div>
|
||||||
#{cc.attrs.editDialogSubmitLabel}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--</div>
|
|
||||||
</div>
|
|
||||||
</div>-->
|
|
||||||
</cc:implementation>
|
</cc:implementation>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
backUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text"
|
backUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text"
|
||||||
canEdit="#{CmsArticleTextBodyStep.canEdit}"
|
canEdit="#{CmsArticleTextBodyStep.canEdit}"
|
||||||
editMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit"
|
editMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit"
|
||||||
editorId="article-text-editor"
|
editorId="cms-article-text-editor"
|
||||||
objectIdentifier="#{CmsSelectedDocumentModel.itemPath}"
|
objectIdentifier="#{CmsSelectedDocumentModel.itemPath}"
|
||||||
selectedLocale="#{CmsArticleTextBodyStep.selectedLocale}"
|
selectedLocale="#{CmsArticleTextBodyStep.selectedLocale}"
|
||||||
title="#{CmsArticleMessageBundle['text.editor.header']}"
|
title="#{CmsArticleMessageBundle['text.editor.header']}"
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
</ui:define>
|
</ui:define>
|
||||||
|
|
||||||
<ui:define name="scripts">
|
<ui:define name="scripts">
|
||||||
<script src="#{request.contextPath}/assets/@content-sections/cms-editor.js"></script>
|
<script src="#{request.contextPath}/assets/@content-sections/article-text-step.js"></script>
|
||||||
</ui:define>
|
</ui:define>
|
||||||
</ui:composition>
|
</ui:composition>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { CmsEditorBuilder, CmsEditor } from "./cms-editor";
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", event => {
|
||||||
|
const editorElem = document.querySelector("#cms-article-text-editor");
|
||||||
|
|
||||||
|
if (editorElem) {
|
||||||
|
const saveUrl = editorElem.getAttribute("data-save-url");
|
||||||
|
const variantUrl = editorElem.getAttribute("data-variant-url");
|
||||||
|
|
||||||
|
if (!saveUrl) {
|
||||||
|
console.error("saveUrl is null");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!variantUrl) {
|
||||||
|
console.error("variantUrl is null");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const builder = new CmsEditorBuilder(
|
||||||
|
editorElem as HTMLElement,
|
||||||
|
saveUrl,
|
||||||
|
variantUrl
|
||||||
|
);
|
||||||
|
|
||||||
|
builder.buildEditor();
|
||||||
|
}
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue