From fb61194ccc5eda4db95fa36451ab45729741667d Mon Sep 17 00:00:00 2001 From: Taufik Nurrohman Date: Fri, 29 Dec 2023 09:59:15 +0700 Subject: [PATCH] Rename `window.TE` to `window.TextEditor` --- {.github/factory => .factory}/LICENSE.txt | 0 {.github/factory => .factory}/_index.pug | 0 {.github/factory => .factory}/index.html.pug | 71 ++++++++++++------- {.github/factory => .factory}/index.js.mjs | 56 +++++++++------ {.github/factory => .factory}/test.html.pug | 2 +- {.github/factory => .factory}/test/$.html.pug | 2 +- .../test/blur,focus.html.pug | 2 +- .../test/disabled.html.pug | 2 +- .../test/get,let,set.html.pug | 2 +- .../factory => .factory}/test/insert.html.pug | 2 +- .../factory => .factory}/test/match.html.pug | 2 +- .../test/peel,wrap.html.pug | 2 +- .../test/pull,push.html.pug | 2 +- .../test/read-only.html.pug | 2 +- .../test/replace.html.pug | 2 +- .../factory => .factory}/test/select.html.pug | 4 +- .../factory => .factory}/test/self.html.pug | 6 +- .../test/self.input.html.pug | 2 +- .../factory => .factory}/test/trim.html.pug | 2 +- .../factory => .factory}/tweak/alter.html.pug | 2 +- .../tweak/alter.prompt.html.pug | 2 +- .../factory => .factory}/tweak/paste.html.pug | 2 +- .../tweak/pull,push.key.html.pug | 2 +- .../tweak/pull,push.type.html.pug | 2 +- .../tweak/replace,search.html.pug | 10 +-- .../tweak/toggle.html.pug | 2 +- .gitattributes | 1 + README.md | 2 +- index.html | 71 ++++++++++++------- index.js | 57 +++++++++------ index.min.js | 2 +- index.mjs | 58 +++++++++------ package.json | 4 +- test.html | 2 +- test/$.html | 2 +- test/blur,focus.html | 2 +- test/disabled.html | 2 +- test/get,let,set.html | 2 +- test/insert.html | 2 +- test/match.html | 2 +- test/peel,wrap.html | 2 +- test/pull,push.html | 2 +- test/read-only.html | 2 +- test/replace.html | 2 +- test/select.html | 4 +- test/self.html | 6 +- test/self.input.html | 2 +- test/trim.html | 2 +- tweak/alter.html | 2 +- tweak/alter.prompt.html | 2 +- tweak/paste.html | 2 +- tweak/pull,push.key.html | 2 +- tweak/pull,push.type.html | 2 +- tweak/replace,search.html | 9 +-- tweak/toggle.html | 2 +- 55 files changed, 265 insertions(+), 172 deletions(-) rename {.github/factory => .factory}/LICENSE.txt (100%) rename {.github/factory => .factory}/_index.pug (100%) rename {.github/factory => .factory}/index.html.pug (85%) rename {.github/factory => .factory}/index.js.mjs (82%) rename {.github/factory => .factory}/test.html.pug (81%) rename {.github/factory => .factory}/test/$.html.pug (78%) rename {.github/factory => .factory}/test/blur,focus.html.pug (91%) rename {.github/factory => .factory}/test/disabled.html.pug (86%) rename {.github/factory => .factory}/test/get,let,set.html.pug (85%) rename {.github/factory => .factory}/test/insert.html.pug (89%) rename {.github/factory => .factory}/test/match.html.pug (87%) rename {.github/factory => .factory}/test/peel,wrap.html.pug (87%) rename {.github/factory => .factory}/test/pull,push.html.pug (89%) rename {.github/factory => .factory}/test/read-only.html.pug (86%) rename {.github/factory => .factory}/test/replace.html.pug (88%) rename {.github/factory => .factory}/test/select.html.pug (77%) rename {.github/factory => .factory}/test/self.html.pug (83%) rename {.github/factory => .factory}/test/self.input.html.pug (82%) rename {.github/factory => .factory}/test/trim.html.pug (90%) rename {.github/factory => .factory}/tweak/alter.html.pug (92%) rename {.github/factory => .factory}/tweak/alter.prompt.html.pug (91%) rename {.github/factory => .factory}/tweak/paste.html.pug (89%) rename {.github/factory => .factory}/tweak/pull,push.key.html.pug (92%) rename {.github/factory => .factory}/tweak/pull,push.type.html.pug (92%) rename {.github/factory => .factory}/tweak/replace,search.html.pug (93%) rename {.github/factory => .factory}/tweak/toggle.html.pug (97%) diff --git a/.github/factory/LICENSE.txt b/.factory/LICENSE.txt similarity index 100% rename from .github/factory/LICENSE.txt rename to .factory/LICENSE.txt diff --git a/.github/factory/_index.pug b/.factory/_index.pug similarity index 100% rename from .github/factory/_index.pug rename to .factory/_index.pug diff --git a/.github/factory/index.html.pug b/.factory/index.html.pug similarity index 85% rename from .github/factory/index.html.pug rename to .factory/index.html.pug index 690dd08..c1c5f75 100755 --- a/.github/factory/index.html.pug +++ b/.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 <textarea>] 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 <textarea>] 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,7 +105,7 @@ block content | </p> | <script src="#[a(href='index.min.js' target='_blank') ./index.min.js]"></script> | <script> - | const editor = new TE(document.querySelector('textarea')); + | const editor = new TextEditor(document.querySelector('textarea')); | </script> | </body> | </html> @@ -113,14 +113,14 @@ block content p Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’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 <input>] Instead of #[code <textarea>] 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’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 < 3) { … } - h3 TE.x + h3 TextEditor.x p List of regular expression characters to be escaped. h3 editor.blur() p Blur from the #[code <textarea>] 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 b/.factory/index.js.mjs similarity index 82% rename from .github/factory/index.js.mjs rename to .factory/index.js.mjs index 51e2d99..dad7b5c 100755 --- a/.github/factory/index.js.mjs +++ b/.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 `

Features

@@ -97,20 +97,20 @@

Browser

</p> <script src="./index.min.js"></script> <script> - const editor = new TE(document.querySelector('textarea')); + const editor = new TextEditor(document.querySelector('textarea')); </script> </body> </html>

Node.js

Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’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.

CommonJS

- 
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'));

ECMAScript

- 
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'));

Examples

Settings

- 
let editor = new TE(self, tab = '\t');
- 
let editor = new TE(self, state = {
-        tab: '\t',
-        with: []
-    });
+ 
const editor = new TextEditor(self, tab = '\t');
+ 
const editor = new TextEditor(self, state = {
+    tab: '\t',
+    with: []
+});
@@ -168,33 +168,33 @@

Settings

- +
state.withList of callable functions to be invoked each time the application is initialized. A very simple “plugin” system.List of callable functions or objects containing an attach() method to be invoked each time the application is initialized. A very simple “plugin” system.

Methods and Properties

-

TE.esc(string)

+

TextEditor.esc(string)

Escape regular expression’s special characters.

-

TE.instances

+

TextEditor.instances

Return the application instances.

- 
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]);
 }

-      
TE.state

+      
TextEditor.state

       
This property stores the initial values of editor.state.

-      
const editor = new TE({
+      
const editor = new TextEditor(document.querySelector('textarea'), {
     foo: ['bar', 'baz', 'qux']
 });
 
-console.log([TE.state, editor.state]);

-      
TE.version

+console.log([TextEditor.state, editor.state]);

+      
TextEditor.version

       
Return the application version.

-      
let version = TE.version,
+      
let version = TextEditor.version,
     major = version.split('.')[0];
 
 if (+major < 3) { … }

-      
TE.x

+      
TextEditor.x

       
List of regular expression characters to be escaped.

       
editor.blur()

       
Blur from the <textarea> element.

@@ -297,6 +297,25 @@ 
editor.$()

       
// `abc`
 console.log(editor.$()); // `{"after":"c","before":"a","end":2,"length":1,"start":1,"value":"b"}`

       
Extensions

+      
Anatomy of an Extension

+      
Extension as a function:

+      
function Extension(self, state = {}) {
+    this.editorMethod = function () {};
+    this.editorProperty = 1;
+}

+      
Extension as an object:

+      
const Extension = {
+    attach: function (self, state = {}) {}
+    detach: function (self, state = {}) {}
+};

+      
Usage of an Extension

+      
As a core extension:

+      
TextEditor.state.with.push(Extension);

+      
As an optional extension:

+      
const editor = new TextEditor(document.querySelector('textarea'), {
+    with: [Extension]
+});

+      
List of Extensions

       
    
         
  • History Feature
    • 
         
  • Rect Feature
    • 
@@ -318,7 +337,7 @@ 
    License
    
     
     
     
   
 
\ No newline at end of file
diff --git a/index.js b/index.js
index cc43fdb..bf5ce01 100644
--- a/index.js
+++ b/index.js
@@ -24,7 +24,7 @@
  *
  */
 (function (g, f) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = f() : typeof define === 'function' && define.amd ? define(f) : (g = typeof globalThis !== 'undefined' ? globalThis : g || self, g.TE = f());
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = f() : typeof define === 'function' && define.amd ? define(f) : (g = typeof globalThis !== 'undefined' ? globalThis : g || self, g.TextEditor = f());
 })(this, (function () {
     'use strict';
     var hasValue = function hasValue(x, data) {
@@ -123,13 +123,13 @@
         return new RegExp(pattern, isSet(opt) ? opt : 'g');
     };
     var x = "!$^*()+=[]{}|:<>,.?/-";
-    var name = 'TE';
+    var name = 'TextEditor';
 
     function trim(str, dir) {
         return (str || "")['trim' + (-1 === dir ? 'Left' : 1 === dir ? 'Right' : "")]();
     }
 
-    function TE(source, state) {
+    function TextEditor(source, state) {
         if (state === void 0) {
             state = {};
         }
@@ -141,17 +141,17 @@
         if (source[name]) {
             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 `
    
-      
       
    
+      
       
    
     
     
     
   
 
\ No newline at end of file
diff --git a/test/self.html b/test/self.html
index e878082..4d19e71 100644
--- a/test/self.html
+++ b/test/self.html
@@ -18,9 +18,9 @@
     
     
   
 
\ No newline at end of file
diff --git a/test/self.input.html b/test/self.input.html
index c5f522b..064a1f6 100644
--- a/test/self.input.html
+++ b/test/self.input.html
@@ -13,7 +13,7 @@
     
     
     
   
 
\ No newline at end of file
diff --git a/test/trim.html b/test/trim.html
index 3c9c4c3..bbf8d2e 100644
--- a/test/trim.html
+++ b/test/trim.html
@@ -18,7 +18,7 @@
     
     
     
   
 
\ No newline at end of file
diff --git a/tweak/alter.html b/tweak/alter.html
index 4136979..ea09eb0 100644
--- a/tweak/alter.html
+++ b/tweak/alter.html
@@ -13,7 +13,7 @@
     
     
     
     
     
     
     
diff --git a/tweak/replace,search.html b/tweak/replace,search.html
index dababa5..ddec297 100644
--- a/tweak/replace,search.html
+++ b/tweak/replace,search.html
@@ -28,8 +28,9 @@