js-kompo-utils 1.0.0

package/kompo-ckeditor-1.0.17/plugins/JsonBlockEditing.js

@@ -0,0 +1,225 @@
+import {Plugin} from 'ckeditor5';
+// Ensure highlight.js is imported in the environment (e.g., via global script)
+import hljs from 'highlight.js';  // (optional, if using bundling)
+import { JsonBlockCommand } from './JsonBlockCommand';
+
+import json from 'highlight.js/lib/languages/json';
+import 'highlight.js/styles/atom-one-dark.css'; // or the theme of your choice
+import { padStart } from 'lodash';
+
+hljs.registerLanguage('json', json);
+
+const TAB_SIZE = window.TAB_SIZE || 2;
+
+function getJsonText(jsonBlockElement) {
+  let text = '';
+  for (const child of jsonBlockElement.getChildren()) {
+    if (child.is('$text')) {
+      text += child.data;
+    } else if (child.name === 'softBreak') {
+      text += '\n';
+    }
+  }
+  return text;
+}
+
+export class JsonBlockEditing extends Plugin {
+  static get pluginName() { return 'JsonBlockEditing'; }
+
+  init() {
+    const editor = this.editor;
+    const schema = editor.model.schema;
+    const conversion = editor.conversion;
+    const model = editor.model;
+
+    // **Schema**: Register the 'jsonBlock' model element
+    schema.register('jsonBlock', {
+      allowWhere: '$block',
+      allowContentOf: '$block',
+      isBlock: true,
+      isLimit: true  // This is key!
+    });
+    // Restrict attributes within the jsonBlock (only plain text, no styles)
+    schema.addAttributeCheck((context, attributeName) => {
+      if (context.endsWith('jsonBlock')) {
+        // Do not allow any formatting attributes in text within the JSON block
+        return false;
+      }
+    });
+
+    // **Upcast Conversion (view -> model)**: from <pre class="json-block"><code class="language-json"> to model
+    conversion.for('upcast').elementToElement({
+      view: {
+        name: 'pre',
+        classes: 'json-block'
+      },
+      model: (viewElement, { writer }) => {
+        const jsonBlock = writer.createElement('jsonBlock');
+      
+        return jsonBlock;
+      }
+    });
+
+    // Add dynamic highlighting using highlight.js without interfering with editing
+    conversion.for('downcast').elementToElement({
+      model: 'jsonBlock',
+      view: (modelItem, conversionApi) => {
+        const { writer } = conversionApi;
+
+        const pre = writer.createContainerElement('pre', { class: 'json-block' });
+
+        return pre;
+      }
+    });
+
+    // Intercept the Enter key within jsonBlock to insert a new line instead of exiting the block
+    editor.editing.view.document.on('enter', (evt, data) => {
+      const pos = editor.model.document.selection.getFirstPosition();
+      if (pos.parent.is('element', 'jsonBlock')) {
+        editor.model.change(writer => {
+          // Insert a newline character at the current position
+          writer.insertText('\n', pos);
+        });
+        evt.stop();  // prevent default behavior (exiting or splitting the block)
+      }
+    }, { priority: 'high' });
+
+    editor.editing.view.document.on('keydown', (evt, data) => {
+      const selection = model.document.selection;
+      const position = selection.getFirstPosition();
+
+      // Detect if Tab is pressed
+      if (data.keyCode === 9) {
+        model.change(writer => {
+            writer.insertText(''.padStart(TAB_SIZE, ' '), position);
+        });
+
+        data.preventDefault();
+        evt.stop();
+      }
+    });
+
+    editor.editing.view.document.on('blur', (evt, data) => {
+      const pos = editor.model.document.selection.getFirstPosition();
+      const jsonBlock = pos.findAncestor('jsonBlock');
+      if (jsonBlock) {
+        editor.model.change(writer => {
+          let jsonTextWithMentions = '';
+          let jsonMappingMentions = [];
+          for (const child of jsonBlock.getChildren()) {
+            if (child.is('$text')) {
+              jsonTextWithMentions += child.data;
+            } else if (child.hasAttribute('data-mention')) {
+              const mention = child.getAttribute('data-mention');
+              jsonTextWithMentions += '{{ ' + mention + ' }}'; // Use the mention name for JSON
+              jsonMappingMentions[mention] = '<span class="mention" contenteditable="false" data-mention="' + mention + '" data-original="' + child.getAttribute('data-original') + '">' + child.getAttribute('data-original') + '</span>';
+            } else if (child.name === 'softBreak') {
+              jsonTextWithMentions += '\n';
+            }
+          }
+
+          try {
+            let formatted = JSON.stringify(JSON.parse(jsonTextWithMentions), null, 2);
+            const mentionRegex = /\{\{\s*[a-zA-Z_]*?\s\}\}/;
+            const splitLines = [];
+
+            let remainingLine = formatted;
+            let match;
+
+            while ((match = mentionRegex.exec(remainingLine)) !== null) {
+                const parts = remainingLine.split(match[0]);
+
+                if (parts[0]) {
+                    splitLines.push(parts[0]); // Agregar texto antes del mention
+                }
+
+                splitLines.push(jsonMappingMentions[match[0].replaceAll(/[\{\}\s]/g, '')]); // Agregar el mention como un nodo intermedio
+
+                remainingLine = parts[1];
+            }
+
+            if (remainingLine) {
+                splitLines.push(remainingLine); // Agregar texto después del mention
+            }
+
+            const previousChildren = Array.from(jsonBlock.getChildren());
+
+            previousChildren.forEach((child) => {
+              if (child.is('$text')) {
+                writer.remove(child)
+              }
+            })
+
+            let insertPosition = writer.createPositionAt(jsonBlock, 'end');
+
+            for (const line of splitLines) {
+              // If it has <>, it's a mention span
+              if (line.startsWith('<') && line.endsWith('>')) {
+                const mentionElement = writer.createElement('mention', {
+                  'data-mention': line.match(/data-mention="([^"]+)"/)[1],
+                  'data-original': line.match(/data-original="([^"]+)"/)[1]
+                });
+
+                writer.insert(mentionElement, insertPosition);
+                // Actualizar la posición después de insertar
+                insertPosition = writer.createPositionAfter(mentionElement);
+              } else {
+                  // Si es texto, insertarlo en la posición actual
+                  writer.insertText(line, insertPosition);
+                  // Actualizar la posición después de insertar
+                  insertPosition = writer.createPositionAt(jsonBlock, 'end');
+              }
+            }
+
+            previousChildren.forEach((child) => {
+              if (!child.is('$text')) {
+                writer.remove(child)
+              }
+            })
+
+
+          } catch (e) {
+            // If JSON is invalid, do nothing
+          }
+        });
+      }
+    });
+
+    // Register the 'jsonBlock' command
+    editor.commands.add('jsonBlock', new JsonBlockCommand(editor));
+
+    // Selection management for highlighting/validation (see below)
+    this._setupHighlightAndValidation();
+  }
+
+  _setupHighlightAndValidation() {
+    const editor = this.editor;
+    const model = editor.model;
+    const view = editor.editing.view;
+
+    // Detect changes in the JSON block content for validation
+    model.document.on('change:data', () => {
+      const jsonBlock = model.document.selection.getFirstPosition().findAncestor('jsonBlock');
+      if (!jsonBlock) return;
+      // Validate JSON syntax of the current content
+      const jsonText = getJsonText(jsonBlock);
+      let isValid = true;
+      try {
+        if (jsonText.trim() !== '') {
+          JSON.parse(jsonText);
+        }
+      } catch (e) {
+        isValid = false;
+      }
+      // Update CSS classes in the view based on validity (e.g., red/green border)
+      const viewElement = editor.editing.mapper.toViewElement(jsonBlock);
+      if (!viewElement) return; // ✅ Protect against errors if the block was removed
+
+      view.change(writer => {
+        writer.removeClass([ 'json-valid', 'json-invalid' ], viewElement);
+        writer.addClass(isValid ? 'json-valid' : 'json-invalid', viewElement);
+        writer.setAttribute('data-validity', isValid ? 'Valid JSON' : 'Invalid JSON', viewElement);
+      });
+    });
+  }
+}

package/kompo-ckeditor-1.0.17/plugins/JsonBlockUi.js

@@ -0,0 +1,21 @@
+import {ButtonView, Plugin} from 'ckeditor5';
+
+export class JsonBlockUI extends Plugin {
+  init() {
+    const editor = this.editor;
+    editor.ui.componentFactory.add('jsonBlock', locale => {
+      const command = editor.commands.get('jsonBlock');
+      const button = new ButtonView(locale);
+      button.set({
+        label: 'JSON Block',
+        withText: true,  // Displays the label as text (you could use a custom icon)
+        tooltip: 'Insert a JSON block'
+      });
+      // Bind the button state to the command
+      button.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
+      // Execute the command when clicked
+      this.listenTo(button, 'execute', () => editor.execute('jsonBlock'));
+      return button;
+    });
+  }
+}

package/kompo-ckeditor-1.0.17/plugins/MentionPlugin.js

@@ -0,0 +1,118 @@
+import { Plugin } from 'ckeditor5';
+
+export default class MentionPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+
+        editor.model.schema.register('mention', {
+            isInline: true,
+            isObject: true,
+            allowWhere: '$text',
+            allowAttributes: ['data-mention', 'data-original']
+        });
+
+        // Allow data-mention as an attribute in $text:
+        editor.model.schema.extend('$text', {
+            allowAttributes: ['data-mention', 'data-original']
+        });
+
+        // Upcast the <span class="mention" data-mention="..."> view to the model:
+        editor.conversion.for('upcast').elementToElement({
+            view: {
+                name: 'span',
+                classes: 'mention'
+            },
+            model: (viewElement, { writer }) => {
+                return writer.createElement('mention', {
+                    'data-mention': viewElement.getAttribute('data-mention'),
+                    'data-original': viewElement.getAttribute('data-original') || viewElement.getChild(0).data
+                });
+            }
+        });
+
+        editor.conversion.for('downcast').elementToElement({
+            model: 'mention',
+            view: (modelItem, { writer }) => {
+                const dataMention = modelItem.getAttribute('data-mention');
+                const dataOriginal = modelItem.getAttribute('data-original');
+
+                // Create the <span> element with attributes and inner content
+                const span = writer.createContainerElement('span', {
+                    class: 'mention',
+                    'data-mention': dataMention,
+                    'data-original': dataOriginal,
+                    'contenteditable': 'false'
+                });
+
+                // Set the inner content of the <span> to the value of data-original
+                const textNode = writer.createText(dataOriginal);
+                writer.insert(writer.createPositionAt(span, 0), textNode);
+
+                return span;
+            }
+        });
+
+        // Implement a robust postfixer to maintain mention integrity
+        editor.model.document.registerPostFixer(writer => {
+            let wasFixed = false;
+            const changes = editor.model.document.differ.getChanges();
+
+            function isSpanNode(node) {
+                return node && node.is('$text') && node.hasAttribute('data-mention');
+            }
+
+            for (const change of changes) {
+                if (change.type === 'remove') {
+                    const position = change.position;
+
+                    if (isSpanNode(position.nodeAfter) && position.nodeBefore.getAttribute('data-original') != position.nodeBefore._data) {
+                        writer.remove(position.nodeAfter);
+                        wasFixed = true;
+                    } else if (isSpanNode(position.nodeBefore) && position.nodeAfter.getAttribute('data-original') != position.nodeAfter._data) {
+                        writer.remove(position.nodeBefore);
+                        wasFixed = true;
+                    }
+                }
+            }
+
+            return wasFixed;
+        });
+
+        // Add a patch to handle the `document-selection-wrong-position` error when clicking on a mention span
+        editor.editing.view.document.on('mousedown', (evt, data) => {
+            try {
+                const domTarget = data.domTarget;
+
+                if (domTarget.nodeName === 'SPAN' && domTarget.classList.contains('mention')) {
+                    const domMention = domTarget.closest('.mention');
+                    const viewMention = editor.editing.view.domConverter.mapDomToView(domMention);
+
+                    if (viewMention) {
+                        const modelMention = editor.editing.mapper.toModelElement(viewMention);
+                        if (modelMention) {
+                            editor.editing.view.focus();
+
+                            editor.model.change(writer => {
+                                // Select the span element completely
+                                const range = writer.createRangeIn(modelMention);
+                                writer.setSelection(range);
+                            });
+
+                            // Prevent default behavior to avoid invalid selection
+                            data.preventDefault();
+                            evt.stop();
+                        }
+                    }
+                }
+            } catch (error) {
+                if (error.name === 'CKEditorError' && error.message.includes('document-selection-wrong-position')) {
+                    editor.model.change(writer => {
+                        writer.setSelection(editor.model.document.getRoot(), 'end');
+                    });
+                } else {
+                    throw error;
+                }
+            }
+        });
+    }
+}

package/orchestrator/KompoJsBuilder.js

@@ -0,0 +1,333 @@
+export class KompoJsConfigBuilder {
+    components = {};
+    bootstrapCallback = null;
+    filesToImport = new Set();
+    includeTutorialEngine = true;
+    tutorialEngineConfig = {};
+    includeJquery = true;
+    includeCkEditor = true;
+    includeKompoMaps = true;
+    vuePlugins = [];
+    windowDecorators = [];
+    windowUtilsObject = {};
+    appSelector = '#app';
+
+    beforeStepCallbacks = {};
+    afterStepCallbacks = {};
+
+    /**
+     * @param {string} componentName
+     * @returns {KompoJsConfigBuilder}
+     */
+    excludeComponent(componentName) {
+        delete this.components[componentName];
+
+        return this;
+    }
+
+    /**
+     * @param {string} componentName
+     * @param {object} componentDefinition - A resolved Vue component object
+     * @returns {KompoJsConfigBuilder}
+     */
+    addComponent(componentName, componentDefinition) {
+        this.components[componentName] = componentDefinition;
+        return this;
+    }
+
+    /**
+     * @param {{[key: string]: object}} components - Map of name to resolved Vue component objects
+     * @returns {KompoJsConfigBuilder}
+     */
+    addComponents(components) {
+        for (const [componentName, componentDefinition] of Object.entries(components)) {
+            this.addComponent(componentName, componentDefinition);
+        }
+
+        return this;
+    }
+
+    /**
+     * @param {string[]} componentNames
+     * @returns {KompoJsConfigBuilder}
+     */
+    excludeComponents(componentNames) {
+        for (const componentName of componentNames) {
+            this.excludeComponent(componentName);
+        }
+        return this;
+    }
+
+    bootstrap(callback) {
+        this.bootstrapCallback = callback;
+        return this;
+    }
+
+    /**
+     * @param {Function} callback - A callback that requires/imports the file, e.g. () => require('./file.js')
+     * @returns {KompoJsConfigBuilder}
+     */
+    addFileToImport(callback) {
+        this.filesToImport.add(callback);
+        return this;
+    }
+
+    /**
+     * @param {Function[]} callbacks
+     * @returns {KompoJsConfigBuilder}
+     */
+    addFilesToImport(callbacks) {
+        for (const callback of callbacks) {
+            this.addFileToImport(callback);
+        }
+        return this;
+    }
+
+    excludeFileToImport(callback) {
+        this.filesToImport.delete(callback);
+        return this;
+    }
+
+    excludeFilesToImport(callbacks) {
+        for (const callback of callbacks) {
+            this.excludeFileToImport(callback);
+        }
+        return this;
+    }
+
+    withTutorialEngine(config = {}) {
+        this.includeTutorialEngine = true;
+        this.tutorialEngineConfig = config;
+        return this;
+    }
+
+    withoutTutorialEngine() {
+        this.includeTutorialEngine = false;
+        return this;
+    }
+
+    withJquery() {
+        this.includeJquery = true;
+        return this;
+    }
+
+    withoutJquery() {
+        this.includeJquery = false;
+        return this;
+    }
+
+    withCkEditor() {
+        this.includeCkEditor = true;
+        return this;
+    }
+
+    withoutCkEditor() {
+        this.includeCkEditor = false;
+        return this;
+    }
+
+    withKompoMaps() {
+        this.includeKompoMaps = true;
+        return this;
+    }
+
+    withoutKompoMaps() {
+        this.includeKompoMaps = false;
+        return this;
+    }
+
+    /**
+     * @param {object} plugin - A Vue plugin to register via Vue.use()
+     * @returns {KompoJsConfigBuilder}
+     */
+    addVuePlugin(plugin) {
+        this.vuePlugins.push(plugin);
+        return this;
+    }
+
+    addWindowDecorator(decorator) {
+        this.windowDecorators.push(decorator);
+        return this;
+    }
+
+    addWindowUtilsItem(key, value) {
+        this.windowUtilsObject[key] = value;
+        return this;
+    }
+
+    mergeWindowUtils(utilsObject) {
+        this.windowUtilsObject = {
+            ...this.windowUtilsObject,
+            ...utilsObject
+        };
+        return this;
+    }
+
+    setAppSelector(selector) {
+        this.appSelector = selector;
+        return this;
+    }
+
+    addBeforeStepCallback(stepName, callback) {
+        if (!this.beforeStepCallbacks[stepName]) {
+            this.beforeStepCallbacks[stepName] = [];
+        }
+        this.beforeStepCallbacks[stepName].push(callback);
+        return this;
+    }
+
+    addAfterStepCallback(stepName, callback) {
+        if (!this.afterStepCallbacks[stepName]) {
+            this.afterStepCallbacks[stepName] = [];
+        }
+        this.afterStepCallbacks[stepName].push(callback);
+        return this;
+    }
+}
+
+export class KompoJsInitializer {
+
+    static ESSENTIAL_STEPS = new Set([
+        'bootstrapExecution',
+        'bootVue',
+        'instanceApp',
+    ]);
+
+    /**
+     * @param {KompoJsConfigBuilder} config
+     */
+    constructor(config, window) {
+        this.config = config;
+        this.window = window;
+    }
+
+    initialize() {
+        this._callStep('bootstrapExecution');
+
+        this._callStep('requireFilesToImport');
+
+        this._callStep('bootJqueryIfRequired');
+
+        this._callStep('bootVue');
+
+        this._callStep('decorateWindow');
+
+        this._callStep('bootCkEditorIfRequired');
+
+        this._callStep('bootMapsIfRequired');
+
+        this._callStep('bootTutorialEngineIfRequired');
+
+        this._callStep('instanceApp');
+    }
+
+    _callStep(stepName) {
+        const isEssential = KompoJsInitializer.ESSENTIAL_STEPS.has(stepName);
+
+        if (isEssential) {
+            this._executeStep(stepName);
+        } else {
+            try {
+                this._executeStep(stepName);
+            } catch (error) {
+                console.error(`[KompoJs] Non-essential step "${stepName}" failed:`, error);
+            }
+        }
+    }
+
+    _executeStep(stepName) {
+        if (this.config.beforeStepCallbacks[stepName]) {
+            for (const callback of this.config.beforeStepCallbacks[stepName]) {
+                callback();
+            }
+        }
+
+        this[stepName]();
+
+        if (this.config.afterStepCallbacks[stepName]) {
+            for (const callback of this.config.afterStepCallbacks[stepName]) {
+                callback();
+            }
+        }
+    }
+
+    bootstrapExecution() {
+        if (this.config.bootstrapCallback) {
+            this.config.bootstrapCallback();
+        }
+    }
+
+    requireFilesToImport() {
+        for (const callback of this.config.filesToImport) {
+            try {
+                callback();
+            } catch (error) {
+                console.error('[KompoJs] File import failed:', error);
+            }
+        }
+    }
+
+    bootJqueryIfRequired() {
+        if (this.config.includeJquery) {
+            this.window.$ = this.window.jQuery = require('jquery');
+        }
+    }
+
+    bootVue() {
+        const Vue = require('vue/dist/vue');
+        this.window.Vue = Vue;
+
+        require('vue-kompo');
+
+        for (const plugin of this.config.vuePlugins) {
+            Vue.use(plugin);
+        }
+
+        for (const [componentName, componentDefinition] of Object.entries(this.config.components)) {
+            Vue.component(componentName, componentDefinition);
+        }
+    }
+
+    decorateWindow() {
+        for (const [key, value] of Object.entries(this.config.windowUtilsObject)) {
+            if (!this.window.utils) {
+                this.window.utils = {};
+            }
+
+            this.window.utils[key] = value;
+            this.window[key] = value;
+        }
+
+        for (const decorator of this.config.windowDecorators) {
+            decorator(this.window);
+        }
+    }
+
+    bootCkEditorIfRequired() {
+        if (this.config.includeCkEditor) {
+            require('../kompo-ckeditor-1.0.17/index.js');
+        }
+    }
+
+    bootMapsIfRequired() {
+        if (this.config.includeKompoMaps) {
+            this.window.GoogleMapsStyle = require('kompo-googlemaps/styles/silver').default;
+            require('kompo-googlemaps');
+        }
+    }
+
+    bootTutorialEngineIfRequired() {
+        if (this.config.includeTutorialEngine) {
+            const { TutorialEngine } = require('../tutorials/TutorialEngine.js');
+            const engine = new TutorialEngine(this.config.tutorialEngineConfig);
+            engine.preload = TutorialEngine.preload;
+            this.window.TutorialEngine = engine;
+        }
+    }
+
+    instanceApp() {
+        new this.window.Vue({
+            el: this.config.appSelector,
+        });
+    }
+}