js-kompo-utils 1.0.0

package/kompo-ckeditor-1.0.17/mixins/CKEditor.js

@@ -0,0 +1,291 @@
+import CKEditor from '@ckeditor/ckeditor5-vue2'
+
+import { 
+    ClassicEditor, 
+    Essentials,
+    CodeBlock, 
+    Alignment, 
+    Font, 
+    FontBackgroundColor, 
+    FontColor, 
+    Bold, 
+    Italic, 
+    Underline, 
+    Heading, 
+    List, 
+    Link, 
+    Table, 
+    BlockQuote,
+    Widget
+} from 'ckeditor5';
+
+import Field from 'vue-kompo/js/form/mixins/Field'
+import DoesAxiosRequests from 'vue-kompo/js/form/mixins/DoesAxiosRequests'
+
+import CkUploadAdapter from './CkUploadAdapter';
+
+Vue.use( CKEditor );
+
+import 'ckeditor5/ckeditor5.css';
+
+import './translations/fr';   
+import './translations/en'; 
+
+import MentionPlugin from '../plugins/MentionPlugin';
+import { JsonBlockEditing } from '../plugins/JsonBlockEditing';
+import { JsonBlockUI } from '../plugins/JsonBlockUi';
+
+function CkCustomUploadAdapterPlugin( editor ) {
+    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
+        // Configure the URL to the upload script in your back-end here!
+        console.log(CkUploadAdapter)
+        return new CkUploadAdapter( loader );
+    };
+}
+
+export default {
+    mixins: [Field, DoesAxiosRequests],
+    data(){
+        return {
+            editor: ClassicEditor,
+            editorConfig: null,
+            mentionNotFound: false,
+            newMentions: {},
+
+        }
+    },
+    computed:{
+        toolbar(){ return this.$_config('toolbar') },
+        mentions(){ return this.$_config('mentions') || [] },
+        focusOnLoad(){ return this.$_config('focusOnLoad') },
+        customTextInsertLabel(){ return this.$_config('customTextInsertLabel') },
+        customTextInsertion(){ return this.$_config('customTextInsertion') },
+    },
+    methods: {
+        onReady(editor, el) {
+            el.ckInstance = editor;
+
+            el.typeSimulated = async (text, options) => {
+                const {
+                    delay = 15
+                } = options;
+
+                const model = editor.model;
+                const doc = model.document;
+
+                model.change(writer => {
+                writer.remove(writer.createRangeIn(doc.getRoot()));
+                });
+
+                for (let i = 0; i < text.length; i++) {
+                    model.change(writer => {
+                        writer.insertText(text[i], doc.selection.getFirstPosition());
+                    });
+                    await new Promise(res => setTimeout(res, delay - (Math.abs(text.length / 2 - Math.abs((text.length / 2 - (i + 1))))) / delay));
+                }
+            };
+        },
+        focus(){
+            //focusing CKeditor not working when click on label :/
+            this.$_focusAction()
+            setTimeout( () => {
+                this.$refs.content.$_instance.editing.view.focus()
+            }, 50 )
+        },
+        $_inputAction(){
+            if(typeof window.KCK !== 'undefined') {
+                clearTimeout(window.KCK);
+            }
+
+            window.KCK = setTimeout(() => {
+                this.$_changeAction()            
+                this.$emit('change', this.$_value) 
+            }, this.$_debounce || 1200);
+        },
+        /*$_inputAction: _.debounce(function () {  //this works too but doesn't allow me to add this.$_debounce
+            this.$_changeAction()            
+            this.$emit('change', this.$_value) 
+        }, 1500), */
+
+        getButtonHtml(mention){
+            return '<div aria-label="'+mention.itemLabel+'" data-balloon-pos="up">'+mention.iconHtml+'</div>'
+        },
+        insertHTML(html){
+            // See: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#where-are-the-editorinserthtml-and-editorinserttext-methods-how-to-insert-some-content
+            const editor = this.$refs.content?.$_instance
+            const viewFragment = editor.data.processor.toView( html )
+            const modelFragment = editor.data.toModel( viewFragment )
+            editor.model.insertContent(modelFragment)
+        },
+        insertTextAndFocus(text){
+            const editor = this.$refs.content?.$_instance
+
+            editor.editing.view.focus()
+
+            editor.model.change( writer => {
+                //I had to focus first then insert the marker then refocus...
+                writer.setSelection( writer.createPositionAt( editor.model.document.selection.getFirstPosition(), 'end' ))
+            })
+
+            this.$nextTick(()=> {
+
+                editor.model.change( writer => {
+
+                    writer.insertText(text, editor.model.document.selection.getFirstPosition() )
+
+                    writer.setSelectionFocus( writer.createPositionAt( editor.model.document.selection.getFirstPosition(), 'end' ))
+                })
+
+            })
+        },
+        activateMention(mention){
+
+            this.$_focusAction()
+
+            this.insertTextAndFocus(' '+mention.marker)
+        },
+        insertCustomText(){
+            this.insertHTML(this.customTextInsertion)
+        },
+        customItemRenderer( item ) {
+            const itemElement = document.createElement( 'div' )
+
+            itemElement.classList.add('mention-option')
+
+            item.iconClass.split(' ').forEach(iconClass => {
+                itemElement.classList.add(iconClass)
+            })
+
+            itemElement.textContent = item.text
+
+            return itemElement;
+        },
+        createFeedCallback( feedItems, itemType ) {
+            return feedText => {
+
+                this.mentionNotFound = null
+
+                const filteredItems = _.toArray(feedItems) //crazy: sometimes feedItems is an object...
+                    .concat(this.newMentions[itemType] || [])
+                    .filter( item => {
+                        // Item might be defined as object.
+                        const itemId = typeof item == 'string' ? item : String( item.id );
+
+                        // The default feed is case insensitive.
+                        return itemId
+                            .normalize('NFD').replace(/[\u0300-\u036f]/g, "") //replace accents
+                            .toLowerCase().includes( feedText.toLowerCase() );
+                    } )
+                    //.slice( 0, 10 ); //had to add this function to disable filtering 10 items...
+
+                if(!filteredItems.length)
+                    this.mentionNotFound = itemType
+
+                return filteredItems;
+            };
+        }
+    },
+    mounted(){
+        if(this.focusOnLoad)
+            this.focus()
+    },
+    created(){
+        const originalCreate = ClassicEditor.create;
+        const self = this;
+        ClassicEditor.create = function (element, config) {
+            return originalCreate.call(this, element, config).then(editor => {
+                element.ckeditorInstance = editor;
+                self.onReady(editor, element);
+                return editor;
+            });
+        };
+
+        let extraPlugins = [
+            Essentials,
+            Alignment,
+            Font,
+            FontBackgroundColor,
+            FontColor,
+            Bold,
+            Italic,
+            Underline,
+            Heading,
+            List,
+            Link,
+            Table,
+            BlockQuote,
+            Widget,
+            MentionPlugin,
+        ];
+
+        // Add plugins from windo global var if it's defined
+        if (window.CKEditorExtraPlugins && Array.isArray(window.CKEditorExtraPlugins)) {
+            extraPlugins = extraPlugins.concat(window.CKEditorExtraPlugins);
+        }
+
+        /* MENTIONS */
+        var mentions = []
+        
+        this.mentions.forEach((mention) => {
+
+            mentions.push(Object.assign(mention, {
+                feed: this.createFeedCallback(mention.initialFeed, mention.itemType),
+                itemRenderer: this.customItemRenderer
+            }))
+        })
+
+        /* IMAGE UPLOAD */
+        let hasImageUploadPlugin = this.toolbar.indexOf('imageUpload') > -1
+        if (hasImageUploadPlugin) {
+            extraPlugins.push(CkCustomUploadAdapterPlugin)            
+        }
+
+        /* CODE BLOCK */
+        let hasCodeBlockPlugin = this.toolbar.indexOf('codeBlock') > -1
+        if (hasCodeBlockPlugin) {
+            extraPlugins.push(CodeBlock)
+        }
+
+        /* JSON FORMATTER */
+        let hasJsonFormatterPlugin = this.toolbar.indexOf('jsonBlock') > -1
+        if (hasJsonFormatterPlugin) {
+            extraPlugins.push(JsonBlockEditing)
+            extraPlugins.push(JsonBlockUI)
+        }
+
+        //$_config toolbar was undefined if declared in data()
+        this.editorConfig = Object.assign({
+            licenseKey: 'GPL',
+            alignment: { options: [ 'left', 'right', 'center', 'justify' ] },
+            toolbar: this.toolbar,
+            table: {
+                contentToolbar: [
+                    'tableColumn', 'tableRow', 'mergeTableCells'
+                ]
+            },        
+            codeBlock: {
+                languages: [
+                    { language: 'css', label: 'CSS' },
+                    { language: 'html', label: 'HTML' },
+                    { language: 'javascript', label: 'JavaScript' },
+                    { language: 'json', label: 'JSON' },
+                ]
+            },
+            list: {
+                properties: {
+                    styles: true,
+                    startIndex: true,
+                    reversed: true
+                }
+            },
+            language: this.$_config('kompo_locale') || 'en',
+        }, !this.mentions.length ? {} : {
+
+            mention: {
+                feeds: mentions,
+            }
+        }, !extraPlugins.length ? {} : {
+            extraPlugins: extraPlugins,
+        })
+    }
+}

package/kompo-ckeditor-1.0.17/mixins/CKEditorUtilities.js

@@ -0,0 +1,52 @@
+export default {
+    methods: {
+        insertVariable(payload) {
+            // Insertar el span sin espacios adicionales para evitar problemas con el cursor
+            const html = '<span class="mention" contenteditable="false" data-mention="' + payload.type + '" data-original="' + payload.label + '">' + payload.label + '</span>'
+            this.insertHtml(html)
+
+            // Ahora asegurémonos de que el cursor quede correctamente posicionado después del span
+            const editor = this.$refs.content?.$_instance
+            editor.model.change(writer => {
+                // Este paso adicional ayuda a asegurar que el cursor quede en una posición editable
+                const selection = editor.model.document.selection
+                if (!selection.isCollapsed) {
+                    writer.setSelection(selection.getLastPosition())
+                }
+            })
+
+            this.variableToInsert = null
+        },
+        insertHtml(html) {
+            const editor = this.$refs.content?.$_instance
+
+            if (!editor) return
+
+            editor.model.change(writer => {
+                // Si el editor está vacío (no hay ningún bloque), creamos un <paragraph> de arranque
+                if (editor.model.document.getRoot().childCount === 0) {
+                    const p = writer.createElement('paragraph')
+                    writer.insert(p, editor.model.document.getRoot(), 0)
+                    // Movemos la selección al inicio del nuevo párrafo
+                    writer.setSelection(p, 0)
+                }
+
+                // Procesar la cadena HTML al modelo
+                const viewFragment = editor.data.processor.toView(html)
+                const modelFragment = editor.data.toModel(viewFragment)
+
+                // Insertar el fragmento en la posición de la selección
+                editor.model.insertContent(modelFragment, editor.model.document.selection)
+            })
+        },
+        insertText(text) {
+            const editor = this.$refs.content?.$_instance
+            if (!editor) return
+            
+            editor.model.change(writer => {
+                const insertPosition = editor.model.document.selection.getFirstPosition()
+                writer.insertText(text, insertPosition)
+            })
+        },
+    },
+}

package/kompo-ckeditor-1.0.17/mixins/CkUploadAdapter.js

@@ -0,0 +1,95 @@
+export default class CkUploadAdapter {
+    constructor( loader ) {
+        // The file loader instance to use during the upload.
+        this.loader = loader;
+    }
+
+    // Starts the upload process.
+    upload() {
+        return this.loader.file
+            .then( file => new Promise( ( resolve, reject ) => {
+                this._initRequest();
+                this._initListeners( resolve, reject, file );
+                this._sendRequest( file );
+            } ) );
+    }
+
+    // Aborts the upload process.
+    abort() {
+        if ( this.xhr ) {
+            this.xhr.abort();
+        }
+    }
+
+    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
+    _initRequest() {
+        const xhr = this.xhr = new XMLHttpRequest();
+
+        // Note that your request may look different. It is up to you and your editor
+        // integration to choose the right communication channel. This example uses
+        // a POST request with JSON as a data structure but your configuration
+        // could be different.
+        xhr.open( 'POST', '/ckeditor-image-upload', true )
+        xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'))
+        xhr.responseType = 'json';
+    }
+
+    // Initializes XMLHttpRequest listeners.
+    _initListeners( resolve, reject, file ) {
+        const xhr = this.xhr;
+        const loader = this.loader;
+        const genericErrorText = `Couldn't upload file: ${ file.name }.`;
+
+        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
+        xhr.addEventListener( 'abort', () => reject() );
+        xhr.addEventListener( 'load', () => {
+            const response = xhr.response;
+
+            // This example assumes the XHR server's "response" object will come with
+            // an "error" which has its own "message" that can be passed to reject()
+            // in the upload promise.
+            //
+            // Your integration may handle upload errors in a different way so make sure
+            // it is done properly. The reject() function must be called when the upload fails.
+            if ( !response || response.error ) {
+                return reject( response && response.error ? response.error.message : genericErrorText );
+            }
+
+            // If the upload is successful, resolve the upload promise with an object containing
+            // at least the "default" URL, pointing to the image on the server.
+            // This URL will be used to display the image in the content. Learn more in the
+            // UploadAdapter#upload documentation.
+            resolve( {
+                default: response.url
+            } );
+        } );
+
+        // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
+        // properties which are used e.g. to display the upload progress bar in the editor
+        // user interface.
+        if ( xhr.upload ) {
+            xhr.upload.addEventListener( 'progress', evt => {
+                if ( evt.lengthComputable ) {
+                    loader.uploadTotal = evt.total;
+                    loader.uploaded = evt.loaded;
+                }
+            } );
+        }
+    }
+
+    // Prepares the data and sends the request.
+    _sendRequest( file ) {
+        // Prepare the form data.
+        const data = new FormData();
+
+        data.append( 'upload', file );
+
+        // Important note: This is the right place to implement security mechanisms
+        // like authentication and CSRF protection. For instance, you can use
+        // XMLHttpRequest.setRequestHeader() to set the request headers containing
+        // the CSRF token generated earlier by your application.
+
+        // Send the request.
+        this.xhr.send( data );
+    }
+}

package/kompo-ckeditor-1.0.17/mixins/translations/en.js

@@ -0,0 +1 @@
+!function(e){const i=e["en-gb"]=e["en-gb"]||{};i.dictionary=Object.assign(i.dictionary||{},{"%0 of %1":"%0 of %1","Align center":"Align center","Align left":"Align left","Align right":"Align right",Aquamarine:"Aquamarine",Big:"Big",Black:"Black","Block quote":"Block quote",Blue:"Blue",Bold:"Bold","Bulleted List":"Bulleted List",Cancel:"Cancel","Cannot upload file:":"Cannot upload file:","Centered image":"Centred image","Change image text alternative":"Change image text alternative","Choose heading":"Choose heading",Column:"Column","Could not insert image at the current position.":"Could not insert image at the current position.","Could not obtain resized image URL.":"Could not obtain resized image URL.","Decrease indent":"Decrease indent",Default:"Default","Delete column":"Delete column","Delete row":"Delete row","Dim grey":"Dim grey","Document colors":"Document colours",Downloadable:"Downloadable","Dropdown toolbar":"","Edit link":"Edit link","Editor toolbar":"","Enter image caption":"Enter image caption","Font Background Color":"Font Background Colour","Font Color":"Font Colour","Font Family":"Font Family","Font Size":"Font Size","Full size image":"Full size image",Green:"Green",Grey:"Grey","Header column":"Header column","Header row":"Header row",Heading:"Heading","Heading 1":"Heading 1","Heading 2":"Heading 2","Heading 3":"Heading 3","Heading 4":"Heading 4","Heading 5":"Heading 5","Heading 6":"Heading 6",Huge:"Huge","Image toolbar":"","image widget":"Image widget","Increase indent":"Increase indent","Insert column left":"Insert column left","Insert column right":"Insert column right","Insert image":"Insert image","Insert image or file":"Insert image or file","Insert media":"Insert media","Insert row above":"Insert row above","Insert row below":"Insert row below","Insert table":"Insert table","Inserting image failed":"Inserting image failed",Italic:"Italic",Justify:"Justify","Left aligned image":"Left aligned image","Light blue":"Light blue","Light green":"Light green","Light grey":"Light grey",Link:"Link","Link URL":"Link URL","Media URL":"Media URL","media widget":"Media widget","Merge cell down":"Merge cell down","Merge cell left":"Merge cell left","Merge cell right":"Merge cell right","Merge cell up":"Merge cell up","Merge cells":"Merge cells",Next:"Next","Numbered List":"Numbered List","Open in a new tab":"Open in a new tab","Open link in new tab":"Open link in new tab",Orange:"Orange",Paragraph:"Paragraph","Paste the media URL in the input.":"Paste the media URL in the input.",Previous:"Previous",Purple:"Purple",Red:"Red",Redo:"Redo","Remove color":"Remove colour","Rich Text Editor":"Rich Text Editor","Rich Text Editor, %0":"Rich Text Editor, %0","Right aligned image":"Right aligned image",Row:"Row",Save:"Save","Select column":"","Select row":"","Selecting resized image failed":"Selecting resized image failed","Show more items":"","Side image":"Side image",Small:"Small","Split cell horizontally":"Split cell horizontally","Split cell vertically":"Split cell vertically","Table toolbar":"","Text alignment":"Text alignment","Text alignment toolbar":"","Text alternative":"Text alternative","The URL must not be empty.":"The URL must not be empty.","This link has no URL":"This link has no URL","This media URL is not supported.":"This media URL is not supported.",Tiny:"Tiny","Tip: Paste the URL into the content to embed faster.":"Tip: Paste the URL into the content to embed faster.",Turquoise:"Turquoise",Underline:"Underline",Undo:"Undo",Unlink:"Unlink","Upload failed":"Upload failed","Upload in progress":"Upload in progress",White:"White",Yellow:"Yellow"}),i.getPluralForm=function(e){return 1!=e}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/kompo-ckeditor-1.0.17/mixins/translations/fr.js

@@ -0,0 +1 @@
+!function(e){const i=e.fr=e.fr||{};i.dictionary=Object.assign(i.dictionary||{},{"%0 of %1":"%0 sur %1","Align center":"Centrer","Align left":"Aligner à gauche","Align right":"Aligner à droite",Aquamarine:"Bleu vert",Big:"Grand",Black:"Noir","Block quote":"Citation",Blue:"Bleu",Bold:"Gras","Bulleted List":"Liste à puces",Cancel:"Annuler","Cannot upload file:":"Envoi du fichier échoué :","Centered image":"Image centrée","Change image text alternative":"Changer le texte alternatif à l’image","Choose heading":"Choisir l'en-tête",Column:"Colonne","Could not insert image at the current position.":"Impossible d'insérer l'image à la position courante.","Could not obtain resized image URL.":"Impossible d'obtenir l'image redimensionnée","Decrease indent":"Diminuer le retrait",Default:"Par défaut","Delete column":"Supprimer la colonne","Delete row":"Supprimer la ligne","Dim grey":"Gris pâle","Document colors":"Couleurs du document",Downloadable:"Fichier téléchargeable","Dropdown toolbar":"Barre d'outils dans un menu déroulant","Edit link":"Modifier le lien","Editor toolbar":"Barre d'outils de l'éditeur","Enter image caption":"Saisir la légende de l’image","Font Background Color":"Couleur d'arrière-plan","Font Color":"Couleur de police","Font Family":"Police","Font Size":"Taille de police","Full size image":"Image taille réelle",Green:"Vert",Grey:"Gris","Header column":"Colonne d'entête","Header row":"Ligne d'entête",Heading:"En-tête","Heading 1":"Titre 1","Heading 2":"Titre 2","Heading 3":"Titre 3","Heading 4":"Titre 4","Heading 5":"Titre 5","Heading 6":"Titre 6",Huge:"Enorme","Image toolbar":"Barre d'outils des images","image widget":"Objet image","Increase indent":"Augmenter le retrait","Insert column left":"Insérer une colonne à gauche","Insert column right":"Insérer une colonne à droite","Insert image":"Insérer une image","Insert image or file":"Insérer une image ou un fichier","Insert media":"Insérer un média","Insert paragraph after block":"","Insert paragraph before block":"","Insert row above":"Insérer une ligne au-dessus","Insert row below":"Insérer une ligne en-dessous","Insert table":"Insérer un tableau","Inserting image failed":"L'insertion d'image a échoué.",Italic:"Italique",Justify:"Justifier","Left aligned image":"Image alignée à gauche","Light blue":"Bleu clair","Light green":"Vert clair","Light grey":"Gris clair",Link:"Lien","Link URL":"URL du lien","Media URL":"URL de média","media widget":"widget média","Merge cell down":"Fusionner la cellule en-dessous","Merge cell left":"Fusionner la cellule à gauche","Merge cell right":"Fusionner la cellule à droite","Merge cell up":"Fusionner la cellule au-dessus","Merge cells":"Fusionner les cellules",Next:"Suivant","Numbered List":"Liste numérotée","Open in a new tab":"Ouvrir dans un nouvel onglet","Open link in new tab":"Ouvrir le lien dans un nouvel onglet",Orange:"Orange",Paragraph:"Paragraphe","Paste the media URL in the input.":"Coller l'URL du média",Previous:"Précedent",Purple:"Violet",Red:"Rouge",Redo:"Restaurer","Remove color":"Enlever la couleur","Rich Text Editor":"Éditeur de texte enrichi","Rich Text Editor, %0":"Éditeur de texte enrichi, %0","Right aligned image":"Image alignée à droite",Row:"Ligne",Save:"Enregistrer","Select column":"","Select row":"","Selecting resized image failed":"La sélection de l'image redimensionnée a échoué.","Show more items":"Montrer plus d'éléments","Side image":"Image latérale",Small:"Petit","Split cell horizontally":"Scinder la cellule horizontalement","Split cell vertically":"Scinder la cellule verticalement","Table toolbar":"Barre d'outils des tableaux","Text alignment":"Alignement du texte","Text alignment toolbar":"Barre d'outils d'alignement du texte","Text alternative":"Texte alternatif","The URL must not be empty.":"L'URL ne doit pas être vide.","This link has no URL":"Ce lien n'a pas d'URL","This media URL is not supported.":"Cette URL de média n'est pas supportée.",Tiny:"Minuscule","Tip: Paste the URL into the content to embed faster.":"Astuce : Copier l'URL du média dans le contenu pour l'insérer plus rapidement",Turquoise:"Turquoise",Underline:"Souligné",Undo:"Annuler",Unlink:"Supprimer le lien","Upload failed":"Échec de l'envoi","Upload in progress":"Téléchargement en cours",White:"Blanc","Widget toolbar":"Barre d'outils du widget",Yellow:"Jaune"}),i.getPluralForm=function(e){return e>1}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

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

@@ -0,0 +1,100 @@
+import {Command} from 'ckeditor5';
+
+export class JsonBlockCommand extends Command {
+    refresh() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        // Determine if the command can be used at the current position
+        const allowedParent = model.schema.findAllowedParent(selection.getFirstPosition(), 'jsonBlock');
+        this.isEnabled = allowedParent !== null;
+        // Determine state: true if the selection is inside an existing JSON block
+        const jsonBlock = selection.getFirstPosition().findAncestor('jsonBlock');
+        this.value = !!jsonBlock;
+    }
+
+    execute() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const jsonBlockElem = selection.getFirstPosition().findAncestor('jsonBlock');
+
+        model.change(writer => {
+            if (jsonBlockElem) {
+                // Move the selection out of the block before deleting it
+                const nextPosition = writer.createPositionBefore(jsonBlockElem);
+                writer.setSelection(nextPosition);
+
+                // Get the text of the jsonBlock
+                const jsonText = getJsonText(jsonBlockElem);
+                const lines = jsonText.split('\n');
+
+                let prevParagraph = null;
+                for (let i = 0; i < lines.length; i++) {
+                    const paragraph = writer.createElement('paragraph');
+                    if (lines[i] !== '') {
+                        writer.insertText(lines[i], paragraph, 0);
+                    }
+                    if (prevParagraph) {
+                        writer.insert(paragraph, writer.createPositionAfter(prevParagraph));
+                    } else {
+                        writer.insert(paragraph, writer.createPositionBefore(jsonBlockElem));
+                    }
+                    prevParagraph = paragraph;
+                }
+
+                // Remove the JSON block
+                writer.remove(jsonBlockElem);
+
+                // Place the cursor back in the last inserted paragraph
+                if (prevParagraph) {
+                    writer.setSelection(prevParagraph, 'end');
+                }
+            } else {
+                // Insert: create a new jsonBlock element at the current position
+                const jsonBlock = writer.createElement('jsonBlock');
+                // If there was selected content, move it as text inside the new JSON block
+                if (!selection.isCollapsed) {
+                    const plainText = getSelectionPlainText(selection);
+                    if (plainText) {
+                        writer.insertText(plainText, jsonBlock, 0);
+                    }
+                }
+                model.insertContent(jsonBlock);
+                // Place cursor inside the JSON block to start editing
+                writer.setSelection(jsonBlock, 'end');
+            }
+        });
+    }
+}
+
+// Helper function: gets the plain text (with \n) of a jsonBlock element from the model
+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;
+}
+
+// Helper function: converts the selected content (model.DocumentSelection) to plain text
+function getSelectionPlainText(selection) {
+    const fragment = selection.getFirstRange() ? selection.getFirstRange().clone().getItems() : [];
+    let text = '';
+    // Iterate through all nodes within the selection (fragment)
+    for (const node of fragment) {
+        if (node.is('$text')) {
+            text += node.data;
+        } else if (node.is('element')) {
+            if (node.name === 'softBreak') {
+                text += '\n';
+            } else if (selection.containsEntireContent(node)) {
+                // If it's a fully selected block element, add its text with a newline
+                text += getJsonText(node) + '\n';
+            }
+        }
+    }
+    return text;
+}