@cocreate/text 1.20.29 → 1.22.0

package/src/index.js

@@ -1,17 +1,16 @@
 /*global CustomEvent, navigator*/
 import observer from '@cocreate/observer';
-import crud from '@cocreate/crud-client';
 import crdt from '@cocreate/crdt';
 import cursors from '@cocreate/cursors';
 import uuid from '@cocreate/uuid';
+import { getAttributes, getAttributeNames, checkValue } from '@cocreate/utils';
 import { updateDom } from './updateDom';
 import { insertAdjacentElement, removeElement, setInnerText, setAttribute, removeAttribute, setClass, setStyle, replaceInnerText } from './updateText';
 import { getSelection, processSelection } from '@cocreate/selection';
 import action from '@cocreate/actions';
-import './saveDomText';
 
 let eventObj;
-let selector = `[collection][document_id][name]`;
+let selector = `[array][object][key]`;
 let selectors = `input${selector}, textarea${selector}, [contenteditable]${selector}:not([contenteditable='false'])`;
 
 function init() {
@@ -27,20 +26,20 @@ function initElements(elements) {
 }
 
 function initElement(element) {
-    let { collection, document_id, name, isRealtime, isCrdt, isCrud, isSave, isRead } = crud.getAttributes(element);
-    if (!collection || !document_id || !name)
+    let { array, object, key, isRealtime, isCrdt, isCrud, isSave, isRead } = getAttributes(element);
+    if (!array || !object || !key)
         return
-    if (document_id == 'pending') {
-        element.pendingDocument = true
+    if (object == 'pending') {
+        element.pendingObject = true
         return
     }
-    if (['_id', 'organization_id', 'storage', 'database', 'collection'].includes(name))
+    if (['_id', 'organization_id', 'storage', 'database', 'array'].includes(key))
         return
     if (isCrdt == "false" || isRealtime == "false" || element.type == 'number')
         return
-    if (!crud.checkValue(collection) || !crud.checkValue(document_id) || !crud.checkValue(name))
+    if (!checkValue(array) || !checkValue(object) || !checkValue(key))
         return
-    if (name && name.startsWith("$"))
+    if (key && key.startsWith("$"))
         return
 
     if (element.tagName === "INPUT" && ["text", "tel", "url"].includes(element.type) || element.tagName === "TEXTAREA" || element.hasAttribute('contenteditable')) {
@@ -59,9 +58,9 @@ function initElement(element) {
         element.setAttribute('crdt', 'true');
         element.crdt = { init: true };
 
-        // TODO: newDocument name consideration. its value is used for setting or overwriting existing value
-        let newDocument = ''
-        if (element.pendingDocument) {
+        // TODO: newObject name consideration. its value is used for setting or overwriting existing value
+        let newObject = ''
+        if (element.pendingObject) {
 
             let value;
             if (element.hasAttribute('contenteditable'))
@@ -69,18 +68,18 @@ function initElement(element) {
             else
                 value = element.value;
             if (value)
-                newDocument = value
+                newObject = value
 
-            delete element.pendingDocument
+            delete element.pendingObject
         }
 
-        crdt.getText({ collection, document_id, name, crud: isCrud, save: isSave, read: isRead, newDocument }).then(response => {
+        crdt.getText({ array, object, key, crud: isCrud, save: isSave, read: isRead, newObject }).then(response => {
             if (response === undefined)
                 return;
             if (!response) {
-                // if (element.pendingDocument) {
+                // if (element.pendingObject) {
                 //     isRead = 'true'
-                //     delete element.pendingDocument
+                //     delete element.pendingObject
                 //  }
 
                 let value;
@@ -91,7 +90,7 @@ function initElement(element) {
                     value = element.value;
                 }
                 if (value)
-                    crdt.replaceText({ collection, document_id, name, value, crud: isCrud, save: isSave, read: isRead });
+                    crdt.replaceText({ array, object, key, value, crud: isCrud, save: isSave, read: isRead });
             }
             else {
                 if (element.hasAttribute('contenteditable')) {
@@ -100,9 +99,13 @@ function initElement(element) {
                 else {
                     element.value = '';
                 }
-                updateElement({ element, collection, document_id, name, value: response, start: 0 })
+                updateElement({ element, array, object, key, value: response, start: 0 })
             }
         });
+
+        element.getValue = async () => {
+            return await crdt.getText({ array, object, key })
+        }
     }
 }
 
@@ -157,11 +160,11 @@ function _mousedown(event) {
             }
         }
     }
-    let contentEditable = target.closest('[collection][document_id][name]');
+    let contentEditable = target.closest('[array][object][key]');
     if (contentEditable) {
         target = contentEditable;
-        const { collection, document_id, name } = crud.getAttributes(target);
-        if (collection && document_id && name && !target.hasAttribute('contenteditable'))
+        const { array, object, key } = getAttributes(target);
+        if (array && object && key && !target.hasAttribute('contenteditable'))
             target.setAttribute('contenteditable', 'true');
     }
     // sendPosition(element)
@@ -169,10 +172,10 @@ function _mousedown(event) {
 
 function _blur(event) {
     let element = event.currentTarget;
-    const { collection, document_id, name } = crud.getAttributes(element);
+    const { array, object, key } = getAttributes(element);
     let start = null;
     let end = null;
-    cursors.sendPosition({ collection, document_id, name, start, end });
+    cursors.sendPosition({ array, object, key, start, end });
 }
 
 function _cut(event) {
@@ -285,20 +288,20 @@ export function sendPosition(element) {
         if (range.element) {
             element = range.element;
         }
-        if (element.tagName == 'HTML' && !element.hasAttribute('collection') || !element.hasAttribute('collection')) {
+        if (element.tagName == 'HTML' && !element.hasAttribute('array') || !element.hasAttribute('array')) {
             element = element.ownerDocument.defaultView.frameElement;
         }
     }
     if (!element) return;
-    const { collection, document_id, name, isCrdt } = crud.getAttributes(element);
-    if (isCrdt == 'false' || !collection || !document_id || !name) return;
-    let currentPosition = { collection, document_id, name, start, end };
+    const { array, object, key, isCrdt } = getAttributes(element);
+    if (isCrdt == 'false' || !array || !object || !key) return;
+    let currentPosition = { array, object, key, start, end };
     if (JSON.stringify(currentPosition) === JSON.stringify(previousPosition))
         return;
     previousPosition = currentPosition;
     element.activeElement = element;
     window.activeElement = element;
-    cursors.sendPosition({ collection, document_id, name, start, end });
+    cursors.sendPosition({ array, object, key, start, end });
 }
 
 function updateText({ element, value, start, end, range, undoRedo }) {
@@ -306,20 +309,20 @@ function updateText({ element, value, start, end, range, undoRedo }) {
         if (range.element)
             element = range.element;
 
-        if (element.tagName == 'HTML' && !element.hasAttribute('collection'))
+        if (element.tagName == 'HTML' && !element.hasAttribute('array'))
             element = element.ownerDocument.defaultView.frameElement;
     }
-    const { collection, document_id, name, isCrud, isCrdt, isSave } = crud.getAttributes(element);
-    if (isCrdt == "false" || !collection || !document_id || !name) return;
+    const { array, object, key, isCrud, isCrdt, isSave } = getAttributes(element);
+    if (isCrdt == "false" || !array || !object || !key) return;
 
     if (undoRedo == 'undo')
-        return crdt.undoText({ collection, document_id, name, isCrud, isCrdt, isSave })
+        return crdt.undoText({ array, object, key, isCrud, isCrdt, isSave })
     if (undoRedo == 'redo')
-        return crdt.redoText({ collection, document_id, name, isCrud, isCrdt, isSave })
+        return crdt.redoText({ array, object, key, isCrud, isCrdt, isSave })
 
     let length = end - start;
     if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
-        crdt.updateText({ collection, document_id, name, value, start, length, crud: isCrud, save: isSave });
+        crdt.updateText({ array, object, key, value, start, length, crud: isCrud, save: isSave });
     } else {
         let startEl = range.startContainer.parentElement;
         let endEl = range.endContainer.parentElement;
@@ -328,7 +331,7 @@ function updateText({ element, value, start, end, range, undoRedo }) {
             //     // value = target.innerHTML;
             //     // replaceInnerText(domTextEditor, target, value)
         }
-        crdt.updateText({ collection, document_id, value, name, start, length, crud: isCrud, save: isSave });
+        crdt.updateText({ array, object, value, key, start, length, crud: isCrud, save: isSave });
     }
 }
 
@@ -338,9 +341,9 @@ function _crdtUpdateListener() {
     });
 }
 
-function updateElements({ elements, collection, document_id, name, value, start, length, string }) {
+function updateElements({ elements, array, object, key, value, start, length, string }) {
     if (!elements) {
-        let selectors = `[collection='${collection}'][document_id='${document_id}'][name='${name}']`;
+        let selectors = `[array='${array}'][object='${object}'][key='${key}']`;
         elements = document.querySelectorAll(`input${selectors}, textarea${selectors}, [contenteditable]${selectors}, [editor='dom']${selectors}`);
     }
 
@@ -348,11 +351,11 @@ function updateElements({ elements, collection, document_id, name, value, start,
         let isCrdt = element.getAttribute('crdt');
         if (!element.hasAttribute('contenteditable') && isCrdt == 'false') return;
 
-        updateElement({ element, collection, document_id, name, value, start, length, string });
+        updateElement({ element, array, object, key, value, start, length, string });
     });
 }
 
-async function updateElement({ element, collection, document_id, name, value, start, length, string }) {
+async function updateElement({ element, array, object, key, value, start, length, string }) {
     if (element.tagName == 'IFRAME') {
         let eid = element.getAttribute('eid')
         element = element.contentDocument.documentElement;
@@ -373,7 +376,7 @@ async function updateElement({ element, collection, document_id, name, value, st
         else {
             let domTextEditor = element;
             if (string == undefined)
-                string = await crdt.getText({ collection, document_id, name });
+                string = await crdt.getText({ array, object, key });
             let html = string;
             if (length) {
                 let end = start + length;
@@ -434,10 +437,10 @@ observer.init({
 observer.init({
     name: 'CoCreateTextAttribtes',
     observe: ['attributes'],
-    attributeName: [...crud.getAttributeNames(['collection', 'document_id', 'name']), 'contenteditable'],
+    attributeName: [...getAttributeNames(['array', 'object', 'key']), 'contenteditable'],
     target: selectors,
     callback(mutation) {
-        let _id = mutation.target.getAttribute('document_id')
+        let _id = mutation.target.getAttribute('object')
         if (!_id) {
             _removeEventListeners(mutation.target)
             mutation.target.removeAttribute('crdt')
@@ -450,18 +453,18 @@ observer.init({
 action.init({
     name: "undo",
     endEvent: "undo",
-    callback: (btn, data) => {
-        const { collection, document_id, name, isCrud, isCrdt, isSave } = crud.getAttributes(btn);
-        crdt.undoText({ collection, document_id, name, isCrud, isCrdt, isSave })
+    callback: (data) => {
+        const { array, object, key, isCrud, isCrdt, isSave } = getAttributes(data.element);
+        crdt.undoText({ array, object, key, isCrud, isCrdt, isSave })
     }
 });
 
 action.init({
     name: "redo",
     endEvent: "redo",
-    callback: (btn, data) => {
-        const { collection, document_id, name, isCrud, isCrdt, isSave } = crud.getAttributes(btn);
-        crdt.redoText({ collection, document_id, name, isCrud, isCrdt, isSave })
+    callback: (data) => {
+        const { array, object, key, isCrud, isCrdt, isSave } = getAttributes(data.element);
+        crdt.redoText({ array, object, key, isCrud, isCrdt, isSave })
     }
 });
 

package/src/updateText.js

@@ -1,79 +1,79 @@
-import crud from '@cocreate/crud-client';
 import crdt from '@cocreate/crdt';
-import {getStringPosition} from '@cocreate/selection';
+import {getAttributes} from '@cocreate/elements';
+import { getStringPosition } from '@cocreate/selection';
 
 export function insertAdjacentElement({ domTextEditor, target, position, element, elementValue }) {
-	let remove;
-	if (element && !elementValue) {
-		remove = getStringPosition({ string: domTextEditor.htmlString, target: element });
-		if (!remove.start && !remove.end)
-			throw new Error('insertAdjacentElement: element not found');
-		elementValue = domTextEditor.htmlString.substring(remove.start, remove.end);
-	}
-	
-	let	{start} = getStringPosition({ string: domTextEditor.htmlString, target, position, value: elementValue });
-	if (remove)
-		_updateText({domTextEditor, start: remove.start, end: remove.end});
-	if (remove && remove.start < start){
-		let length = remove.end - remove.start;
-		_updateText({ domTextEditor, value: elementValue, start: start - length});
-	}
-	else
-		_updateText({ domTextEditor, value: elementValue, start});
+    let remove;
+    if (element && !elementValue) {
+        remove = getStringPosition({ string: domTextEditor.htmlString, target: element });
+        if (!remove.start && !remove.end)
+            throw new Error('insertAdjacentElement: element not found');
+        elementValue = domTextEditor.htmlString.substring(remove.start, remove.end);
+    }
+
+    let { start } = getStringPosition({ string: domTextEditor.htmlString, target, position, value: elementValue });
+    if (remove)
+        _updateText({ domTextEditor, start: remove.start, end: remove.end });
+    if (remove && remove.start < start) {
+        let length = remove.end - remove.start;
+        _updateText({ domTextEditor, value: elementValue, start: start - length });
+    }
+    else
+        _updateText({ domTextEditor, value: elementValue, start });
 }
 
 export function removeElement({ domTextEditor, target }) {
-	updateDomText({ domTextEditor, target });
+    updateDomText({ domTextEditor, target });
 }
 
 export function setInnerText({ domTextEditor, target, value, start, end }) {
-	updateDomText({ domTextEditor, target, value, pos: {start, end} });
+    updateDomText({ domTextEditor, target, value, pos: { start, end } });
 }
 
 export function setClass({ domTextEditor, target, value }) {
-	updateDomText({ domTextEditor, target, attribute: 'class', value });
+    updateDomText({ domTextEditor, target, attribute: 'class', value });
 }
 export function removeClass({ domTextEditor, target, value }) {
-	updateDomText({ domTextEditor, target, attribute: 'class', value, remove: true });
+    updateDomText({ domTextEditor, target, attribute: 'class', value, remove: true });
 }
 
 export function setStyle({ domTextEditor, target, property, value }) {
-	updateDomText({ domTextEditor, target, attribute: 'style', property, value });
+    updateDomText({ domTextEditor, target, attribute: 'style', property, value });
 }
 
 export function removeStyle({ domTextEditor, target, property }) {
-	updateDomText({ domTextEditor, target, attribute: 'style', property, remove: true });
+    updateDomText({ domTextEditor, target, attribute: 'style', property, remove: true });
 }
 
 export function setAttribute({ domTextEditor, target, name, value }) {
-	updateDomText({ domTextEditor, target, attribute: name, value });
+    updateDomText({ domTextEditor, target, attribute: name, value });
 }
 
 export function removeAttribute({ domTextEditor, target, name }) {
-	updateDomText({ domTextEditor, target, attribute: name, remove: 'true'});
+    updateDomText({ domTextEditor, target, attribute: name, remove: 'true' });
 }
 
 export function replaceInnerText({ domTextEditor, target, value }) {
-	updateDomText({ domTextEditor, target, value });
+    updateDomText({ domTextEditor, target, value });
 }
 
 export function updateDomText({ domTextEditor, target, position, element, elementValue, attribute, value, property, pos, remove }) {
-	let	{start, end, newValue} = getStringPosition({ string: domTextEditor.htmlString, target, attribute, property, value, remove });
-	if (pos){
-		start += pos.start;
-		end += pos.end;
-	}
-	if (start != end)
-		_updateText({domTextEditor, start, end});
-	if (attribute && remove != 'true' || attribute && value)
-		_updateText({ domTextEditor, value: ` ${attribute}="${newValue}"`, start });
-	else if (value)
-		_updateText({ domTextEditor, value, start });
+    let { start, end, newValue } = getStringPosition({ string: domTextEditor.htmlString, target, attribute, property, value, remove });
+    if (pos) {
+        start += pos.start;
+        end += pos.end;
+    }
+    if (start != end)
+        _updateText({ domTextEditor, start, end });
+    if (attribute && remove != 'true' || attribute && value)
+        _updateText({ domTextEditor, value: ` ${attribute}="${newValue}"`, start });
+    else if (value)
+        _updateText({ domTextEditor, value, start });
 }
 
-function _updateText({ domTextEditor, value, start, end}) {
-    if (domTextEditor.tagName =='HTML')
+function _updateText({ domTextEditor, value, start, end }) {
+    if (domTextEditor.tagName == 'HTML')
         domTextEditor = domTextEditor.ownerDocument.defaultView.frameElement;
-    const { collection, document_id, name, isCrud } = crud.getAttributes(domTextEditor);
-	crdt.updateText({ collection, document_id, name, value, start, length: end - start, crud: isCrud });
+    const { array, object, key, isCrud } = getAttributes(domTextEditor);
+    crdt.updateText({ array, object, key, value, start, length: end - start, crud: isCrud });
 }

package/webpack.config.js

@@ -1,84 +1,88 @@
 const path = require("path")
 const TerserPlugin = require("terser-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-let isProduction = process.env.NODE_ENV === "production"
 const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 
-module.exports = {
-  entry: {
-    "CoCreate-text": "./src/index.js",
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: isProduction ? "[name].min.js" : "[name].js",
-    libraryTarget: "umd",
-    libraryExport: "default",
-    library: ["CoCreate", "text"],
-    globalObject: "this",
-  },
+module.exports = (env, argv) => {
+    let isProduction = false
+    if (argv.mode === 'production')
+        isProduction = true
 
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    }),
-  ],
-  // Default mode for Webpack is production.
-  // Depending on mode Webpack will apply different things
-  // on final bundle. For now we don't need production's JavaScript
-  // minifying and other thing so let's set mode to development
-  mode: isProduction ? "production" : "development",
-  module: {
-    rules: [
-      {
-        test: /.js$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            plugins: ["@babel/plugin-transform-modules-commonjs"],
-          },
+    const config = {
+        entry: {
+            "CoCreate-text": "./src/index.js",
         },
-      },
-      {
-        test: /.css$/i,
-        use: [
-          { loader: "style-loader", options: { injectType: "linkTag" } },
-          "file-loader",
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            filename: isProduction ? "[name].min.js" : "[name].js",
+            libraryTarget: "umd",
+            libraryExport: "default",
+            library: ["CoCreate", "text"],
+            globalObject: "this",
+        },
+
+        plugins: [
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
         ],
-      },
-    ],
-  },
+        // Default mode for Webpack is production.
+        // Depending on mode Webpack will apply different things
+        // on final bundle. For now we don't need production's JavaScript
+        // minifying and other thing so let's set mode to development
+        mode: isProduction ? "production" : "development",
+        module: {
+            rules: [
+                {
+                    test: /.js$/,
+                    exclude: /(node_modules)/,
+                    use: {
+                        loader: "babel-loader",
+                        options: {
+                            plugins: ["@babel/plugin-transform-modules-commonjs"],
+                        },
+                    },
+                },
+                {
+                    test: /.css$/i,
+                    use: [
+                        { loader: "style-loader", options: { injectType: "linkTag" } },
+                        "file-loader",
+                    ],
+                },
+            ],
+        },
 
-  // add source map
-  ...(isProduction ? {} : { devtool: "eval-source-map" }),
+        // add source map
+        ...(isProduction ? {} : { devtool: "eval-source-map" }),
 
-  // optimization: {
-  //   minimize: true,
-  //   minimizer: [
-  //     new TerserPlugin({
-  //       extractComments: true,
-  //       // cache: true,
-  //       parallel: true,
-  //       // sourceMap: true, // Must be set to true if using source-maps in production
-  //       terserOptions: {
-  //         // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-  //         // extractComments: 'all',
-  //         compress: {
-  //           drop_console: true,
-  //         },
-  //       },
-  //     }),
-  //   ],
-  //   splitChunks: {
-  //     chunks: "all",
-  //     minSize: 200,
-  //     // maxSize: 99999,
-  //     //minChunks: 1,
+        // optimization: {
+        //   minimize: true,
+        //   minimizer: [
+        //     new TerserPlugin({
+        //       extractComments: true,
+        //       // cache: true,
+        //       parallel: true,
+        //       // sourceMap: true, // Must be set to true if using source-maps in production
+        //       terserOptions: {
+        //         // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+        //         // extractComments: 'all',
+        //         compress: {
+        //           drop_console: true,
+        //         },
+        //       },
+        //     }),
+        //   ],
+        //   splitChunks: {
+        //     chunks: "all",
+        //     minSize: 200,
+        //     // maxSize: 99999,
+        //     //minChunks: 1,
 
-  //     cacheGroups: {
-  //       defaultVendors: false,
-  //     },
-    // },
-  // },
-}
+        //     cacheGroups: {
+        //       defaultVendors: false,
+        //     },
+        // },
+        // },
+    }

package/src/saveDomText.js

@@ -1,32 +0,0 @@
-/*globals CustomEvent*/
-import action from '@cocreate/actions';
-import crud from '@cocreate/crud-client';
-import crdt from '@cocreate/crdt';
-
-function save(btn){
-	const { collection, document_id, name, namespace, room, broadcast, broadcastSender, isUpsert} = crud.getAttributes(btn);
-	crdt.getText({collection, document_id, name}).then(response => {
-		crud.updateDocument({
-			collection,
-			document: {
-				_id: document_id,
-				[name]: response
-			},
-			upsert: isUpsert,
-			namespace,
-			room,
-			broadcast,
-			broadcastSender
-		});
-		
-		document.dispatchEvent(new CustomEvent('savedDomText'));
-	});
-}
-
-action.init({
-	name: "saveDomText",
-	endEvent: "savedDomText",
-	callback: (btn, data) => {
-		save(btn);
-	},
-});