@akilli/editor-src 5.1.5

package/build/editor.css

@@ -0,0 +1,548 @@
+/**
+ * Variable
+ */
+:root {
+    --editor-block-background: #012022;
+    --editor-block-color: #fff;
+    --editor-border: #01202233;
+    --editor-button-background: #012022;
+    --editor-button-color: #fff;
+    --editor-cancel-background: #e3e7e7;
+    --editor-cancel-color: #012022;
+    --editor-dialog-background: #fff;
+    --editor-dialog-color: #012022;
+    --editor-error: #cc2e2c;
+    --editor-focus: #fcece1;
+    --editor-placeholder: #01202233;
+    --editor-slot: #09575c;
+    --editor-sortover: #012022;
+    --editor-toolbar-background: #fff;
+    --editor-toolbar-color: #012022;
+    --editor-text-block: 'Block: ' attr(id);
+    --editor-text-editable: 'Gimme some text!';
+    --editor-text-root: 'Gimme some widgets!';
+    --editor-text-slot: 'Focus this slot and gimme some widgets!';
+    --editor-text-tablecol: 'Col ';
+    --editor-text-tablebodyrow: 'Row ';
+    --editor-text-tablefootrow: 'Foot ';
+    --editor-text-tableheadrow: 'Head ';
+}
+
+akilli-editor[lang=de] {
+    --editor-text-editable: 'Gib mir Text!';
+    --editor-text-root: 'Gib mir Widgets!';
+    --editor-text-slot: 'Fokussiere diesen Slot und gib mir Widgets!';
+    --editor-text-tablecol: 'Spalte ';
+    --editor-text-tablebodyrow: 'Zeile ';
+    --editor-text-tablefootrow: 'Fuß ';
+    --editor-text-tableheadrow: 'Kopf ';
+}
+
+::backdrop {
+    --editor-dialog-backdrop: #000000cc;
+}
+
+/**
+ * Font
+ */
+@font-face {
+    font-family: editor;
+    font-display: block;
+    font-style: normal;
+    font-weight: 900;
+    src: url(editor.woff2) format('woff2');
+}
+
+/**
+ * Editor
+ */
+akilli-editor {
+    position: relative;
+    display: block;
+}
+
+/**
+ * Editor Root
+ */
+akilli-editor editor-root {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 0.6875rem 0.6875rem;
+    overflow: auto;
+    border: 0.0625rem solid var(--editor-border);
+    border-top: 0;
+}
+
+akilli-editor editor-root:empty::after {
+    color: var(--editor-placeholder);
+    content: var(--editor-text-root);
+}
+
+/**
+ * Widgets
+ */
+akilli-editor editor-root :focus {
+    outline: 0.25rem dashed var(--editor-focus);
+}
+
+/**
+ * Editable
+ */
+akilli-editor editor-root [contenteditable] {
+    min-height: 1.5rem;
+}
+
+akilli-editor editor-root [contenteditable=true]:empty::after {
+    color: var(--editor-placeholder);
+    content: var(--editor-text-editable);
+}
+
+akilli-editor editor-root :is(td, th)[contenteditable] {
+    height: 1.5rem;
+}
+
+akilli-editor editor-root slot[contenteditable] {
+    display: block;
+    padding: 0.25rem;
+    clear: both;
+    border: 0.25rem solid var(--editor-slot);
+}
+
+akilli-editor editor-root slot[contenteditable=true]:empty::after {
+    color: var(--editor-slot);
+    content: var(--editor-text-slot);
+}
+
+akilli-editor editor-root [contenteditable=true] :hover {
+    cursor: context-menu;
+}
+
+/**
+ * Sortable
+ */
+akilli-editor editor-root [data-sortable][data-sort]:hover {
+    cursor: grab;
+}
+
+akilli-editor editor-root :is([data-sortover], [contenteditable][data-sortover]) {
+    outline: 0.25rem dashed var(--editor-sortover);
+}
+
+/**
+ * Container
+ */
+akilli-editor editor-root :is(details, div, section) {
+    overflow: auto;
+}
+
+/**
+ * Media
+ */
+akilli-editor editor-root :is(audio, iframe, img, video) {
+    pointer-events: none;
+}
+
+/**
+ * Table
+ */
+akilli-editor editor-root :is(thead, tbody, tfoot) {
+    counter-reset: rows;
+}
+
+akilli-editor editor-root colgroup {
+    display: table-header-group;
+    counter-reset: cols;
+}
+
+akilli-editor editor-root col,
+akilli-editor editor-root :is(colgroup, tr)::before {
+    display: table-cell;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    vertical-align: middle;
+    text-align: center;
+    color: var(--editor-placeholder);
+}
+
+akilli-editor editor-root col::after {
+    counter-increment: cols;
+    content: var(--editor-text-tablecol) counter(cols);
+}
+
+akilli-editor editor-root colgroup::before {
+    content: ' ';
+}
+
+akilli-editor editor-root tr::before {
+    counter-increment: rows;
+    content: var(--editor-text-tablebodyrow) counter(rows);
+}
+
+akilli-editor editor-root thead tr::before {
+    content: var(--editor-text-tableheadrow) counter(rows);
+}
+
+akilli-editor editor-root tfoot tr::before {
+    content: var(--editor-text-tablefootrow) counter(rows);
+}
+
+akilli-editor editor-root col:focus,
+akilli-editor editor-root tr:focus::before {
+    background: var(--editor-focus);
+}
+
+/**
+ * Details
+ */
+akilli-editor editor-root summary {
+    white-space: pre-wrap;
+}
+
+/**
+ * Block
+ */
+akilli-editor editor-root app-block {
+    display: block;
+    padding: 0.25rem;
+    border: 0.0625rem solid var(--editor-block-background);
+}
+
+akilli-editor editor-root app-block::before {
+    display: block;
+    margin: -0.25rem -0.25rem 0.5rem;
+    padding: 0.125rem 0.25rem;
+    color: var(--editor-block-color);
+    background: var(--editor-block-background);
+    content: var(--editor-text-block);
+}
+
+/**
+ * Dialog
+ */
+akilli-editor dialog::backdrop {
+    background: var(--editor-dialog-backdrop);
+}
+
+akilli-editor dialog form {
+    padding: 0.75rem;
+    color: var(--editor-dialog-color);
+    background: var(--editor-dialog-background);
+}
+
+akilli-editor dialog :is(form, fieldset) > :not(:first-child) {
+    margin-top: 1.5rem;
+}
+
+akilli-editor dialog legend {
+    font-size: 1.25rem;
+}
+
+akilli-editor dialog label {
+    display: block;
+}
+
+akilli-editor dialog [data-required] label::after {
+    content: ' *';
+}
+
+akilli-editor dialog button {
+    padding: 0.75rem;
+    color: var(--editor-button-color);
+    background: var(--editor-button-background);
+}
+
+akilli-editor dialog button + button {
+    margin-left: 1.5rem;
+}
+
+akilli-editor dialog button[type=reset] {
+    color: var(--editor-cancel-color);
+    background: var(--editor-cancel-background);
+}
+
+akilli-editor dialog input:is(
+    [type=email],
+    [type=number],
+    [type=password],
+    [type=search],
+    [type=tel],
+    [type=text],
+    [type=url]
+),
+akilli-editor dialog select {
+    width: 100%;
+    padding: 0.71875rem 0;
+    border-bottom: 0.0625rem solid var(--editor-border);
+}
+
+akilli-editor dialog input:is(
+    [type=email],
+    [type=number],
+    [type=password],
+    [type=search],
+    [type=tel],
+    [type=text],
+    [type=url]
+):invalid,
+akilli-editor dialog select:invalid {
+    border-color: var(--editor-error);
+}
+
+/**
+ * Toolbar
+ */
+akilli-editor editor-toolbar {
+    position: sticky;
+    top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    color: var(--editor-toolbar-color);
+    background: var(--editor-toolbar-background);
+    border: 0.0625rem solid var(--editor-border);
+}
+
+akilli-editor :is(editor-focusbar, editor-formatbar) {
+    position: absolute;
+    left: 0;
+    display: flex;
+    flex-wrap: wrap;
+    color: var(--editor-toolbar-color);
+    background: var(--editor-toolbar-background);
+    border: 0.0625rem solid var(--editor-border);
+}
+
+akilli-editor editor-focusbar:empty,
+akilli-editor editor-focusbar [data-command] {
+    display: none;
+}
+
+akilli-editor editor-focusbar[data-alignable] [data-command^=align-],
+akilli-editor editor-focusbar[data-deletable] [data-command=delete],
+akilli-editor editor-focusbar[data-sortable] [data-command^=sort-],
+akilli-editor editor-focusbar[data-tag=col] [data-command^=tablecolumn-],
+akilli-editor editor-focusbar[data-tag=tr] [data-command^=tablerow-] {
+    display: inline-block;
+}
+
+/**
+ * Buttons
+ */
+akilli-editor [data-command] {
+    display: inline-block;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+    font-family: editor;
+    font-size: 0;
+}
+
+akilli-editor [data-command]:focus {
+    color: var(--editor-focus);
+}
+
+akilli-editor [data-command]::before {
+    font-size: 1.5rem;
+}
+
+akilli-editor [data-command=abbreviation]::before {
+    content: '\e800';
+}
+
+akilli-editor [data-command=align-center]::before {
+    content: '\e801';
+}
+
+akilli-editor [data-command=align-left]::before {
+    content: '\e802';
+}
+
+akilli-editor [data-command=align-none]::before {
+    content: '\e803';
+}
+
+akilli-editor [data-command=align-right]::before {
+    content: '\e804';
+}
+
+akilli-editor [data-command=audio]::before {
+    content: '\e805';
+}
+
+akilli-editor [data-command=block]::before {
+    content: '\e806';
+}
+
+akilli-editor [data-command=blockquote]::before {
+    content: '\e807';
+}
+
+akilli-editor [data-command=bold]::before {
+    content: '\e808';
+}
+
+akilli-editor [data-command=cite]::before {
+    content: '\e809';
+}
+
+akilli-editor [data-command=code]::before {
+    content: '\e80a';
+}
+
+akilli-editor [data-command=data]::before {
+    content: '\e80b';
+}
+
+akilli-editor [data-command=definition]::before {
+    content: '\e80c';
+}
+
+akilli-editor [data-command=delete]::before {
+    content: '\e80d';
+}
+
+akilli-editor [data-command=deletion]::before {
+    content: '\e80e';
+}
+
+akilli-editor [data-command=details]::before {
+    content: '\e80f';
+}
+
+akilli-editor [data-command=division]::before {
+    content: '\e810';
+}
+
+akilli-editor [data-command=emphasis]::before {
+    content: '\e811';
+}
+
+akilli-editor [data-command=heading]::before {
+    content: '\e812';
+}
+
+akilli-editor [data-command=horizontalrule]::before {
+    content: '\e813';
+}
+
+akilli-editor [data-command=iframe]::before {
+    content: '\e814';
+}
+
+akilli-editor [data-command=image]::before {
+    content: '\e815';
+}
+
+akilli-editor [data-command=insertion]::before {
+    content: '\e816';
+}
+
+akilli-editor [data-command=italic]::before {
+    content: '\e817';
+}
+
+akilli-editor [data-command=keyboard]::before {
+    content: '\e818';
+}
+
+akilli-editor [data-command=link]::before {
+    content: '\e819';
+}
+
+akilli-editor [data-command=mark]::before {
+    content: '\e81a';
+}
+
+akilli-editor [data-command=orderedlist]::before {
+    content: '\e81b';
+}
+
+akilli-editor [data-command=paragraph]::before {
+    content: '\e81c';
+}
+
+akilli-editor [data-command=preformat]::before {
+    content: '\e81d';
+}
+
+akilli-editor [data-command=quote]::before {
+    content: '\e81e';
+}
+
+akilli-editor [data-command=sample]::before {
+    content: '\e81f';
+}
+
+akilli-editor [data-command=section]::before {
+    content: '\e820';
+}
+
+akilli-editor [data-command=small]::before {
+    content: '\e821';
+}
+
+akilli-editor [data-command=sort-first]::before {
+    content: '\e822';
+}
+
+akilli-editor [data-command=sort-last]::before {
+    content: '\e823';
+}
+
+akilli-editor [data-command=sort-next]::before {
+    content: '\e824';
+}
+
+akilli-editor [data-command=sort-prev]::before {
+    content: '\e825';
+}
+
+akilli-editor [data-command=strikethrough]::before {
+    content: '\e826';
+}
+
+akilli-editor [data-command=strong]::before {
+    content: '\e827';
+}
+
+akilli-editor [data-command=subheading]::before {
+    content: '\e828';
+}
+
+akilli-editor [data-command=subscript]::before {
+    content: '\e829';
+}
+
+akilli-editor [data-command=superscript]::before {
+    content: '\e82a';
+}
+
+akilli-editor [data-command=table]::before {
+    content: '\e82b';
+}
+
+akilli-editor [data-command=tablecolumn-add]::before {
+    content: '\e82c';
+}
+
+akilli-editor [data-command=tablerow-add]::before {
+    content: '\e82d';
+}
+
+akilli-editor [data-command=time]::before {
+    content: '\e82e';
+}
+
+akilli-editor [data-command=underline]::before {
+    content: '\e82f';
+}
+
+akilli-editor [data-command=unorderedlist]::before {
+    content: '\e830';
+}
+
+akilli-editor [data-command=variable]::before {
+    content: '\e831';
+}
+
+akilli-editor [data-command=video]::before {
+    content: '\e832';
+}

package/cite/Cite.js

@@ -0,0 +1,30 @@
+import Base from '../base/Base.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Cite extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'cite';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.CITE, group: TagGroup.FORMAT });
+        this._command(TagName.CITE);
+        this._formatbar('Citation', Key.Z);
+    }
+}

package/code/Code.js

@@ -0,0 +1,30 @@
+import Base from '../base/Base.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Code extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'code';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.CODE, group: TagGroup.FORMAT });
+        this._command(TagName.CODE);
+        this._formatbar('Code', Key.C);
+    }
+}

package/data/Data.js

@@ -0,0 +1,32 @@
+import Base from '../base/Base.js';
+import DataDialog from './DataDialog.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Data extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'data';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.DATA, group: TagGroup.FORMAT, attributes: ['value'] });
+        this.editor.dialogs.set(new DataDialog(this.editor, this.constructor.name));
+        this._command(TagName.DATA);
+        this._formatbar('Data', Key.J);
+    }
+}

package/data/DataDialog.js

@@ -0,0 +1,13 @@
+import Dialog from '../base/Dialog.js';
+
+export default class DataDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator.addLegend(this._('Data')).addTextInput('value', this._('Machine-readable Value'), {
+            placeholder: this._('Insert value or leave empty to remove it'),
+        });
+    }
+}

package/definition/Definition.js

@@ -0,0 +1,32 @@
+import Base from '../base/Base.js';
+import DefinitionDialog from './DefinitionDialog.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Definition extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'definition';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.DFN, group: TagGroup.FORMAT, attributes: ['title'] });
+        this.editor.dialogs.set(new DefinitionDialog(this.editor, this.constructor.name));
+        this._command(TagName.DFN);
+        this._formatbar('Definition', Key.D);
+    }
+}

package/definition/DefinitionDialog.js

@@ -0,0 +1,13 @@
+import Dialog from '../base/Dialog.js';
+
+export default class DefinitionDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator.addLegend(this._('Definition')).addTextInput('title', this._('Term'), {
+            placeholder: this._('Insert term or leave empty to remove it'),
+        });
+    }
+}