add id attribute to editor

config/nova-ckeditor.php

@@ -80,6 +80,7 @@
             'bold',
             'italic',
             'alignment',
+            'elementIdAttributes',
             'horizontalLine',
             'subscript',
             'superscript',

resources/js/ckeditor/ckeditor.js

@@ -52,11 +52,12 @@ import VideoBrowser from './plugins/VideoBrowser'
 import SnippetBrowser from './plugins/SnippetBrowser'
 
 // Video
-import Video from "./plugins/video/video";
+import Video from "./plugins/video/video"
 
 
 // Other
-import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
+import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting'
+import ElementAddAttributes from './plugins/element-attribute/src/add-attribute-to-element'
 
 // Extend the Base Class
 export default class CkEditor extends ClassicEditorBase {
@@ -114,7 +115,8 @@ export default class CkEditor extends ClassicEditorBase {
             HtmlEmbed,
             SourceEditing,
             Indent,
-            IndentBlock
+            IndentBlock,
+            ElementAddAttributes
         ]
     }
 }

resources/js/ckeditor/config/image.js

@@ -7,7 +7,7 @@ export default {
             types: ['gif', 'png', 'jpg', 'jpeg', 'webp']
         },
         toolbar: [
-            'mediaBrowser',
+            'imageBrowser',
             'imageStyle:full',
             'imageStyle:alignLeft',
             'imageStyle:alignCenter',

resources/js/ckeditor/plugins/element-attribute/.gitignore

@@ -0,0 +1,91 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

resources/js/ckeditor/plugins/element-attribute/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Rhys Stubbs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-command.js

@@ -0,0 +1,27 @@
+import Command from '@ckeditor/ckeditor5-core/src/command'
+
+class ElementAddAttributesCommand extends Command {
+    refresh() {
+        const element = this.editor.model.document.selection.anchor.parent
+
+        this.isEnabled = true
+
+        if (!!element && element.hasAttribute('id')) {
+            this.value = element.getAttribute('id')
+        }
+        else {
+            this.value = false
+        }
+    }
+
+    execute(options) {
+        const model = this.editor.model
+        const element = this.editor.model.document.selection.anchor.parent
+
+        model.change(writer => {
+            writer.setAttribute('id', options.newValue, element)
+        })
+    }
+}
+
+export default ElementAddAttributesCommand

resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-editing.js

@@ -0,0 +1,26 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ElementAddAttributesCommand from './add-attribute-to-element-command';
+import {viewToModelStyleAttribute, modelToViewStyleAttribute} from './converters';
+
+class ElementAddAttributesEditing extends Plugin {
+    static get pluginName() {
+        return 'ElementAddAttributesEditing';
+    }
+
+    init() {
+        const editor = this.editor;
+        const data = editor.data;
+        const editing = editor.editing;
+
+        // Converters for imageStyle attribute from model to view.
+        editing.downcastDispatcher.on('attribute:id', modelToViewStyleAttribute());
+        data.downcastDispatcher.on('attribute:id', modelToViewStyleAttribute());
+
+        // Converter for figure element from view to model.
+        data.upcastDispatcher.on('element', viewToModelStyleAttribute(), {priority: 'low'});
+
+        this.editor.commands.add('elementIdAttributes', new ElementAddAttributesCommand(this.editor));
+    }
+}
+
+export default ElementAddAttributesEditing;