Rename window.TE to window.TextEditor

taufik-nurrohman · Dec 29, 2023 · fb61194 · fb61194
1 parent 9dba972
commit fb61194
Show file tree

Hide file tree

Showing 55 changed files with 265 additions and 172 deletions.
diff --git a/.github/factory/LICENSE.txt → .factory/LICENSE.txt b/.github/factory/LICENSE.txt → .factory/LICENSE.txt
diff --git a/.github/factory/_index.pug → .factory/_index.pug b/.github/factory/_index.pug → .factory/_index.pug
diff --git a/.github/factory/index.html.pug → .factory/index.html.pug b/.github/factory/index.html.pug → .factory/index.html.pug
@@ -7,7 +7,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block style
   style
@@ -68,10 +68,10 @@ block content
   p(role='alert') Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you!
   header
     h1= title
-    p Text Editor is a simple JavaScript application that aims to provide accessibility improvements to the native HTML #[code &lt;textarea&gt;] elements so that users can control and manipulate their data in the text editor as they wish.
+    p Text Editor is a simple JavaScript application that aims to provide accessibility enhancements to the native HTML #[code &lt;textarea&gt;] elements, allowing users to control and manipulate their data in the text editor as they wish.
     hr
   main
-    p It contains very sufficient methods to manipulate the existing text selection range data without providing unnecessary features. This ensures the file size remains small and keeps the scope of learning curve to be narrow, so that you can focus on the results.
+    p It contains very sufficient methods to manipulate the existing text selection range data without providing unnecessary features. This keeps the file size small and the learning curve low, so you can fully focus on the results.
     p
       textarea(spellcheck='false' style={
         'display': 'block',
@@ -105,22 +105,22 @@ block content
       |     &lt;/p&gt;
       |     &lt;script src="#[a(href='index.min.js' target='_blank') ./index.min.js]"&gt;&lt;/script&gt;
       |     &lt;script&gt;
-      |       const editor = new TE(document.querySelector('textarea'));
+      |       const editor = new TextEditor(document.querySelector('textarea'));
       |     &lt;/script&gt;
       |   &lt;/body&gt;
       | &lt;/html&gt;
     h3 Node.js
     p Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn&rsquo;t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.
     h4 CommonJS
     pre: code
-      | const TE = require('@taufik-nurrohman/text-editor').default;
+      | const TextEditor = require('@taufik-nurrohman/text-editor').default;
       |
-      | const editor = new TE(document.querySelector('textarea'));
+      | const editor = new TextEditor(document.querySelector('textarea'));
     h4 ECMAScript
     pre: code
-      | import TE from '@taufik-nurrohman/text-editor';
+      | import TextEditor from '@taufik-nurrohman/text-editor';
       |
-      | const editor = new TE(document.querySelector('textarea'));
+      | const editor = new TextEditor(document.querySelector('textarea'));
     h2 Examples
     ul
       li: a(href='test.html' target='_blank') No Idea?
@@ -146,12 +146,12 @@ block content
       li: a(href='test/trim.html' target='_blank') Trim Selection
       li: a(href='test/self.input.html' target='_blank') Using #[code &lt;input&gt;] Instead of #[code &lt;textarea&gt;]
     h2 Settings
-    pre: code let editor = new TE(#[var self], #[var tab] = '\t');
+    pre: code const editor = new TextEditor(self, tab = '\t');
     pre: code
-      | let editor = new TE(#[var self], #[var state] = {
-      |         tab: '\t',
-      |         with: []
-      |     });
+      | const editor = new TextEditor(self, state = {
+      |     tab: '\t',
+      |     with: []
+      | });
     table(border='1')
       thead
         tr
@@ -172,33 +172,33 @@ block content
           td The default indent character for #[code editor.pull()] and #[code editor.push()] method.
         tr
           td: code state.with
-          td List of callable functions to be invoked each time the application is initialized. A very simple “plugin” system.
+          td List of callable functions or objects containing an #[code attach()] method to be invoked each time the application is initialized. A very simple “plugin” system.
     h2 Methods and Properties
-    h3 TE.esc(string)
+    h3 TextEditor.esc(string)
     p Escape regular expression&rsquo;s special characters.
-    h3 TE.instances
+    h3 TextEditor.instances
     p Return the application instances.
     pre: code
-      | for (let key in TE.instances) {
+      | for (let key in TextEditor.instances) {
       |     console.log(key);
-      |     console.log(TE.instances[key]);
+      |     console.log(TextEditor.instances[key]);
       | }
-    h3 TE.state
+    h3 TextEditor.state
     p This property stores the initial values of #[code editor.state].
     pre: code
-      | const editor = new TE({
+      | const editor = new TextEditor(document.querySelector('textarea'), {
       |     foo: ['bar', 'baz', 'qux']
       | });
       |
-      | console.log([TE.state, editor.state]);
-    h3 TE.version
+      | console.log([TextEditor.state, editor.state]);
+    h3 TextEditor.version
     p Return the application version.
     pre: code
-      | let version = TE.version,
+      | let version = TextEditor.version,
       |     major = version.split('.')[0];
       |
       | if (+major &lt; 3) { &hellip; }
-    h3 TE.x
+    h3 TextEditor.x
     p List of regular expression characters to be escaped.
     h3 editor.blur()
     p Blur from the #[code &lt;textarea&gt;] element.
@@ -316,6 +316,29 @@ block content
       | // `a#[mark b]c`
       | console.log(editor.$()); // `{"after":"c","before":"a","end":2,"length":1,"start":1,"value":"b"}`
     h2 Extensions
+    h3 Anatomy of an Extension
+    p Extension as a function:
+    pre: code
+      | function Extension(self, state = {}) {
+      |     this.editorMethod = function () {};
+      |     this.editorProperty = 1;
+      | }
+    p Extension as an object:
+    pre: code
+      | const Extension = {
+      |     attach: function (self, state = {}) {}
+      |     detach: function (self, state = {}) {}
+      | };
+    h3 Usage of an Extension
+    p As a core extension:
+    pre: code
+      | TextEditor.state.with.push(Extension);
+    p As an optional extension:
+    pre: code
+      | const editor = new TextEditor(document.querySelector('textarea'), {
+      |     with: [Extension]
+      | });
+    h3 List of Extensions
     ul
       li: a(href='../text-editor.history/index.html' target='_blank') History Feature
       li: a(href='../text-editor.rect/index.html' target='_blank') Rect Feature

diff --git a/.github/factory/index.js.mjs → .factory/index.js.mjs b/.github/factory/index.js.mjs → .factory/index.js.mjs
@@ -1,6 +1,6 @@
 import {B, D, H, R, W} from '@taufik-nurrohman/document';
 import {fromStates} from '@taufik-nurrohman/from';
-import {isArray, isFunction, isInstance, isSet, isString} from '@taufik-nurrohman/is';
+import {isArray, isFunction, isInstance, isObject, isSet, isString} from '@taufik-nurrohman/is';
 import {esc, fromPattern, toPattern, x} from '@taufik-nurrohman/pattern';
 import {toCount, toObjectCount} from '@taufik-nurrohman/to';
 
@@ -10,7 +10,7 @@ function trim(str, dir) {
     return (str || "")['trim' + (-1 === dir ? 'Left' : 1 === dir ? 'Right' : "")]();
 }
 
-function TE(source, state = {}) {
+function TextEditor(source, state = {}) {
 
     const $ = this;
 
@@ -23,20 +23,20 @@ function TE(source, state = {}) {
         return source[name];
     }
 
-    // Return new instance if `TE` was called without the `new` operator
-    if (!isInstance($, TE)) {
-        return new TE(source, state);
+    // Return new instance if `TextEditor` was called without the `new` operator
+    if (!isInstance($, TextEditor)) {
+        return new TextEditor(source, state);
     }
 
-    $.state = state = fromStates({}, TE.state, isString(state) ? {
+    $.state = state = fromStates({}, TextEditor.state, isString(state) ? {
         tab: state
     } : (state || {}));
 
     // The `<textarea>` element
     $.self = $.source = source;
 
-    // Store current instance to `TE.instances`
-    TE.instances[source.id || source.name || toObjectCount(TE.instances)] = $;
+    // Store current instance to `TextEditor.instances`
+    TextEditor.instances[source.id || source.name || toObjectCount(TextEditor.instances)] = $;
 
     // Mark current DOM as active text editor to prevent duplicate instance
     source[name] = $;
@@ -65,7 +65,7 @@ function TE(source, state = {}) {
 
     // Get selection
     $.$ = () => {
-        return new TE.S(source.selectionStart, source.selectionEnd, sourceValue());
+        return new TextEditor.S(source.selectionStart, source.selectionEnd, sourceValue());
     };
 
     $.focus = mode => {
@@ -239,32 +239,48 @@ function TE(source, state = {}) {
         if (!source[name]) {
             return $; // Already ejected!
         }
+        if (isArray(state.with)) {
+            for (let i = 0, j = toCount(state.with); i < j; ++i) {
+                let value = state.with[i];
+                if (isObject(value) && isFunction(value.detach)) {
+                    value.detach.call($, source, state);
+                    continue;
+                }
+            }
+        }
         return (delete source[name]), $;
     };
 
-    // Return the text editor state
-    $.state = state;
-
     if (isArray(state.with)) {
         for (let i = 0, j = toCount(state.with); i < j; ++i) {
-            isFunction(state.with[i]) && state.with[i].call($, source, state);
+            let value = state.with[i];
+            // `const Extension = function (source, state = {}) {}`
+            if (isFunction(value)) {
+                value.call($, source, state);
+                continue;
+            }
+            // `const Extension = {attach: function (source, state = {}) {}, detach: function (source, state = {}) {}}`
+            if (isObject(value) && isFunction(value.attach)) {
+                value.attach.call($, source, state);
+                continue;
+            }
         }
     }
 
     return $;
 
 }
 
-TE.esc = esc;
+TextEditor.esc = esc;
 
-TE.instances = {};
+TextEditor.instances = {};
 
-TE.state = {
+TextEditor.state = {
     'tab': '\t',
     'with': []
 };
 
-TE.S = function (a, b, c) {
+TextEditor.S = function (a, b, c) {
     let t = this,
         d = c.slice(a, b);
     t.after = c.slice(b);
@@ -276,8 +292,8 @@ TE.S = function (a, b, c) {
     t.toString = () => d;
 };
 
-TE.version = '%(version)';
+TextEditor.version = '%(version)';
 
-TE.x = x;
+TextEditor.x = x;
 
-export default TE;
+export default TextEditor;
diff --git a/.github/factory/test.html.pug → .factory/test.html.pug b/.github/factory/test.html.pug → .factory/test.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/$.html.pug → .factory/test/$.html.pug b/.github/factory/test/$.html.pug → .factory/test/$.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/blur,focus.html.pug → .factory/test/blur,focus.html.pug b/.github/factory/test/blur,focus.html.pug → .factory/test/blur,focus.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block style
   style

diff --git a/.github/factory/test/disabled.html.pug → .factory/test/disabled.html.pug b/.github/factory/test/disabled.html.pug → .factory/test/disabled.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/get,let,set.html.pug → .factory/test/get,let,set.html.pug b/.github/factory/test/get,let,set.html.pug → .factory/test/get,let,set.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/insert.html.pug → .factory/test/insert.html.pug b/.github/factory/test/insert.html.pug → .factory/test/insert.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/match.html.pug → .factory/test/match.html.pug b/.github/factory/test/match.html.pug → .factory/test/match.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
     |
     | function check() {
     |     if (editor.match(/^\d+$/)) {

diff --git a/.github/factory/test/peel,wrap.html.pug → .factory/test/peel,wrap.html.pug b/.github/factory/test/peel,wrap.html.pug → .factory/test/peel,wrap.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/pull,push.html.pug → .factory/test/pull,push.html.pug b/.github/factory/test/pull,push.html.pug → .factory/test/pull,push.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/read-only.html.pug → .factory/test/read-only.html.pug b/.github/factory/test/read-only.html.pug → .factory/test/read-only.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/replace.html.pug → .factory/test/replace.html.pug b/.github/factory/test/replace.html.pug → .factory/test/replace.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main

diff --git a/.github/factory/test/select.html.pug → .factory/test/select.html.pug b/.github/factory/test/select.html.pug → .factory/test/select.html.pug
@@ -6,7 +6,7 @@ block state
 
 block script
   script
-    | const editor = new TE(document.querySelector('textarea'));
+    | const editor = new TextEditor(document.querySelector('textarea'));
 
 block content
   main
@@ -21,4 +21,4 @@ block content
       = ' '
       button(onclick='editor.select(8);') Move Caret to 8
       = ' '
-      button(onclick='editor.select(4, 8);') Select 4 to 8
+      button(onclick='editor.select(4, 9);') Select 4 to 8
diff --git a/.github/factory/test/self.html.pug → .factory/test/self.html.pug b/.github/factory/test/self.html.pug → .factory/test/self.html.pug
@@ -8,9 +8,9 @@ block script
   script
     | let sources = document.querySelectorAll('textarea');
     |
-    | const editor_1 = new TE(sources[0]);
-    | const editor_2 = new TE(sources[1]);
-    | const editor_3 = new TE(sources[2]);
+    | const editor_1 = new TextEditor(sources[0]);
+    | const editor_2 = new TextEditor(sources[1]);
+    | const editor_3 = new TextEditor(sources[2]);
 
 block content
   main