qword 0.1.0 → 1.0.0

package/README.md

@@ -1,37 +1,38 @@
-# Dword [![License][LicenseIMGURL]][LicenseURL] [![NPM version][NPMIMGURL]][NPMURL]
+# Qword [![License][LicenseIMGURL]][LicenseURL] [![NPM version][NPMIMGURL]][NPMURL]
 
-[NPMIMGURL]: https://img.shields.io/npm/v/dword.svg?style=flat
-[BuildStatusURL]: https://github.com/cloudcmd/dword/actions?query=workflow%3A%22Node+CI%22 "Build Status"
-[BuildStatusIMGURL]: https://github.com/cloudcmd/dword/workflows/Node%20CI/badge.svg
+[NPMIMGURL]: https://img.shields.io/npm/v/qword.svg?style=flat
+[BuildStatusURL]: https://github.com/cloudcmd/qword/actions?query=workflow%3A%22Node+CI%22 "Build Status"
+[BuildStatusIMGURL]: https://github.com/cloudcmd/qword/workflows/Node%20CI/badge.svg
 [LicenseIMGURL]: https://img.shields.io/badge/license-MIT-317BF9.svg?style=flat
-[NPM_INFO_IMG]: https://nodei.co/npm/dword.png?downloads=true&&stars&&downloadRank "npm install dword"
-[NPMURL]: https://npmjs.org/package/dword "npm"
+[NPM_INFO_IMG]: https://nodei.co/npm/qword.png?downloads=true&&stars&&downloadRank "npm install qword"
+[NPMURL]: https://npmjs.org/package/qword "npm"
 [LicenseURL]: https://tldrlegal.com/license/mit-license "MIT License"
-[edit.json]: https://github.com/cloudcmd/dword/tree/master/json/edit.json "edit.json"
+[edit.json]: https://github.com/cloudcmd/qword/tree/master/json/edit.json "edit.json"
 
 Web editor based on [CodeMirror](http://codemirror.net).
 Fork of [edward](https://github.com/cloudcmd/edward "Edward").
 
-![dword](https://raw.githubusercontent.com/cloudcmd/dword/master/img/dword.png "dword")
+<img width="601" height="295" alt="image" src="https://github.com/user-attachments/assets/e632f48a-ef74-4d5c-bbe8-8f6e44151d00" />
+
 
 ## Features
 
 - Syntax highlighting based on extension of file for over 90 languages.
 - Built-in `emmet` (for html files)
 - Drag n drop (drag file from desktop to editor).
-- Configurable options ([json/edit.json][edit.json] could be overriden by `~/.dword.json`)
+- Configurable options ([json/edit.json][edit.json] could be overriden by `~/.qword.json`)
 
 ## Install
 
 ```
-npm i dword -g
+npm i qword -g
 ```
 
 ![NPM\_INFO][NPM_INFO_IMG]
 
 ## Command line parameters
 
-Usage: `dword [filename]`
+Usage: `qword [filename]`
 
 |Parameter              |Operation
 |:----------------------|:--------------------------------------------
@@ -50,22 +51,22 @@ Usage: `dword [filename]`
 
 ## API
 
-dword could be used as middleware for [express](http://expressjs.com "Express").
+qword could be used as middleware for [express](http://expressjs.com "Express").
 For this purpuse API could be used.
 
 ### Server
 
-#### dword(options)
+#### qword(options)
 
-Middleware of `dword`. Options could be omitted.
+Middleware of `qword`. Options could be omitted.
 
 ```js
-import {dword} from 'dword';
+import {qword} from 'qword';
 import express from 'express';
 
 const app = express();
 
-app.use(dword({
+app.use(qword({
     root: '/', // default
     online: true, // default
     diff: true, // default
@@ -77,17 +78,18 @@ app.use(dword({
 app.listen(31_337);
 ```
 
-#### dword.listen(socket)
+#### qword.listen(socket)
 
 Could be used with [socket.io](http://socket.io "Socket.io") to handle editor events with.
 
 ```js
 import {Server} from 'socket.io';
+
 const socket = new Server(server);
 
-dword.listen(socket, {
+qword.listen(socket, {
     // optional
-    prefixSocket: '/dword',
+    prefixSocket: '/qword',
     // optional
     auth: (accept, reject) => (username, password) => {
         accept();
@@ -97,14 +99,14 @@ dword.listen(socket, {
 
 ### Client
 
-Dword uses [codemirror](http://codemirror.net/ "CodeMirror") on client side, so API is similar.
+qword uses [codemirror](http://codemirror.net/ "CodeMirror") on client side, so API is similar.
 All you need is put minimal `html`, `css`, and `js` into your page.
 
 Minimal html:
 
 ```html
 <div class="edit" data-name="js-edit"></div>
-<script src="/dword/dword.js"></script>
+<script src="/qword/qword.js"></script>
 ```
 
 Minimal css:
@@ -119,15 +121,15 @@ html, body, .edit {
 Minimal js:
 
 ```js
-dword('[data-name="js-edit"]', (editor) => {
-    editor.setValue('hello dword');
-    console.log('dword is ready');
+qword('[data-name="js-edit"]', (editor) => {
+    editor.setValue('hello qword');
+    console.log('qword is ready');
 });
 ```
 
 #### Client API
 
-##### `dword(selector, callback)`
+##### `qword(selector, callback)`
 
 - `selector`: **string**
 - `callback`: **EditorCallback**
@@ -155,10 +157,10 @@ interface Editor {
 }
 
 type EditorCallback = (editor: Editor) => void;
-type Dword = (selector: string, callback: EditorCallback) => void;
+type qword = (selector: string, callback: EditorCallback) => void;
 ```
 
-For more information you could always look around `client/dword.js` directory.
+For more information you could always look around `client/qword.js` directory.
 
 ## Related
 

package/assets/index.html

@@ -6,17 +6,16 @@
     </head>
     <body>
         <div class="edit" data-name="js-edit"></div>
-        <script src="/dword/dword.js"></script>
+        <script src="/qword/qword.js"></script>
         <script>
-            /* global dword */
             window.addEventListener('DOMContentLoaded', function domLoad() {
-                dword('[data-name="js-edit"]', (editor) => {
+                globalThis.qword('[data-name="js-edit"]', (editor) => {
                     editor.setOptions({
                         fontSize: '16px',
                         fontFamily: 'Droid Sans Mono',
                     });
                 });
-                
+
                 window.removeEventListener('DOMContentLoaded', domLoad);
             });
         </script>

package/bin/{dword.js → qword.js}

@@ -10,7 +10,7 @@ import {Server} from 'socket.io';
 import info from '../package.json' with {
     type: 'json',
 };
-import {dword} from '../server/index.js';
+import {qword} from '../server/index.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -53,7 +53,7 @@ function main(name) {
     
     app
         .use(express.static(DIR))
-        .use(dword({
+        .use(qword({
             online: false,
             diff: true,
             zip: true,
@@ -62,7 +62,7 @@ function main(name) {
     server.listen(port, ip);
     
     const socket = new Server(server);
-    const edSocket = dword.listen(socket);
+    const edSocket = qword.listen(socket);
     
     edSocket.on('connection', () => {
         fs.readFile(name, 'utf8', (error, data) => {
@@ -98,7 +98,11 @@ function usage() {
 }
 
 async function help() {
-    const bin = await import('../json/bin');
+    const bin = await import('../json/bin.json', {
+        with: {
+            type: 'json',
+        },
+    });
     
     usage();
     console.log('Options:');

package/client/_init-socket.js

@@ -1,4 +1,3 @@
-/* global io */
 import {applyPatch} from 'daffy';
 import {alert} from 'smalltalk';
 
@@ -9,7 +8,7 @@ const getHost = () => {
 };
 
 export default function() {
-    const dword = this;
+    const qword = this;
     const href = getHost();
     const FIVE_SECONDS = 5000;
     
@@ -17,9 +16,9 @@ export default function() {
         socket.emit('patch', name, data);
     };
     
-    const {_prefixSocket} = dword;
+    const {_prefixSocket} = qword;
     
-    const socket = io.connect(href + _prefixSocket, {
+    const socket = globalThis.io.connect(href + _prefixSocket, {
         'max reconnection attempts': 2 ** 32,
         'reconnection limit': FIVE_SECONDS,
         'path': this._socketPath + '/socket.io',
@@ -32,7 +31,7 @@ export default function() {
     });
     
     socket.on('connect', () => {
-        dword._patch = patch;
+        qword._patch = patch;
     });
     
     socket.on('message', (msg) => {
@@ -40,7 +39,7 @@ export default function() {
     });
     
     socket.on('file', (name, data) => {
-        dword
+        qword
             .setModeForPath(name)
             .setValueFirst(name, data)
             .moveCursorTo(0, 0);
@@ -53,8 +52,8 @@ export default function() {
         if (hash !== this._story.getHash(name))
             return;
         
-        const cursor = dword.getCursor();
-        const value = dword.getValue();
+        const cursor = qword.getCursor();
+        const value = qword.getValue();
         const result = applyPatch(value, data);
         
         this.setValue(result);
@@ -64,11 +63,11 @@ export default function() {
             .setData(name, value)
             .setHash(name, this.sha());
         
-        dword.moveCursorTo(cursor.row, cursor.column);
+        qword.moveCursorTo(cursor.row, cursor.column);
     });
     
     socket.on('disconnect', () => {
-        dword.save.patch = globalThis._patchHttp;
+        qword.save.patch = globalThis._patchHttp;
     });
     
     socket.on('err', (error) => {

package/client/loadremote.js

@@ -4,12 +4,12 @@ import once from 'once';
 
 const isString = (a) => typeof a === 'string';
 
-const loadModules = once(async (prefix) => {
+export const loadModules = once(async (prefix) => {
     const url = `${prefix}/modules.json`;
     return await load.json(url);
 });
 
-const loadOptions = once(async (prefix) => {
+export const loadOptions = once(async (prefix) => {
     const url = `${prefix}/options.json`;
     return await load.json(url);
 });

package/client/qword.js

@@ -0,0 +1,405 @@
+import '../css/qword.css';
+import {EditorState, Compartment} from '@codemirror/state';
+import {
+    EditorView,
+    keymap,
+    lineNumbers,
+    highlightActiveLine,
+} from '@codemirror/view';
+import {
+    history,
+    historyKeymap,
+    defaultKeymap,
+} from '@codemirror/commands';
+import {
+    syntaxHighlighting,
+    defaultHighlightStyle,
+} from '@codemirror/language';
+import {oneDark} from '@codemirror/theme-one-dark';
+import {javascript} from '@codemirror/lang-javascript';
+import {json} from '@codemirror/lang-json';
+import {html} from '@codemirror/lang-html';
+import Emitify from 'emitify';
+import * as smalltalk from 'smalltalk';
+import jssha from 'jssha';
+import load from 'load.js';
+import {createPatch} from 'daffy';
+import * as restafary from 'restafary/client';
+import {tryCatch} from 'try-catch';
+import {vim} from '@replit/codemirror-vim';
+import Story from './story.js';
+import loadRemote, {loadModules, loadOptions} from './loadremote.js';
+import _clipboard from './_clipboard.js';
+import save from './save.js';
+import _initSocket from './_init-socket.js';
+import _onSave from './_on-save.js';
+import showMessage from './show-message.js';
+
+const noop = () => {};
+
+const isFn = (a) => typeof a === 'function';
+const isString = (a) => typeof a === 'string';
+
+export default function Qword(el, options = {}, callback = noop) {
+    if (!(this instanceof Qword))
+        return new Qword(el, options, callback);
+    
+    if (isFn(options)) {
+        callback = options;
+        options = {};
+    }
+    
+    this._DIR = '/modules/';
+    this._TITLE = 'Qword';
+    
+    this._story = Story();
+    
+    this._Separator = '\n';
+    this._isKey = true;
+    
+    this._Element = isString(el) ? document.querySelector(el) : el || document.body;
+    
+    if (!this._Element)
+        throw Error('Qword: element not found');
+    
+    this._maxSize = options.maxSize || 512_000;
+    
+    this._PREFIX = options.prefix || '/qword';
+    this._prefixSocket = options.prefixSocket || '/qword';
+    this._socketPath = options.socketPath || '';
+    
+    this._Emitter = Emitify();
+    
+    this._view = null;
+    this._pendingValue = null;
+    
+    this._modeCompartment = new Compartment();
+    this._keymapCompartment = new Compartment();
+    this._fontCompartment = new Compartment();
+    this._langCompartment = new Compartment();
+    // ✅ FIX: добавили vim compartment
+    this._vimCompartment = new Compartment();
+    
+    this._Element.addEventListener('drop', this._onDrop.bind(this));
+    this._Element.addEventListener('dragover', this._onDragOver.bind(this));
+    
+    this
+        ._init()
+        .then(() => callback(this));
+    
+    this._patch = (path, patch) => {
+        this._patchHttp(path, patch);
+    };
+    
+    this._write = (path, result) => {
+        this._writeHttp(path, result);
+    };
+}
+
+Qword.prototype._init = async function() {
+    const prefix = this._PREFIX;
+    
+    await Promise.all([
+        loadOptions(prefix),
+        loadModules(prefix),
+    ]);
+    
+    await loadRemote('socket', {
+        prefix: this._socketPath,
+    });
+    
+    restafary.prefix(`${this._PREFIX}/api/v1/fs`);
+    
+    this._initEditor();
+    
+    if (this._pendingValue !== null) {
+        this.setValue(this._pendingValue);
+        this._pendingValue = null;
+    }
+    
+    this._initSocket();
+    
+    return this;
+};
+
+Qword.prototype._initEditor = function() {
+    const baseExtensions = () => [
+        lineNumbers(),
+        history(),
+        highlightActiveLine(),
+        syntaxHighlighting(defaultHighlightStyle),
+        oneDark,
+        this._langCompartment.of(javascript()),
+        // ✅ FIX: vim теперь через compartment
+        this._vimCompartment.of([]),
+        keymap.of([
+            ...defaultKeymap,
+            ...historyKeymap, {
+                key: 'Mod-s',
+                run: () => {
+                    this.save();
+                    return true;
+                },
+            },
+        ]),
+    ];
+    
+    this._vimEnabled = false;
+    
+    const state = EditorState.create({
+        doc: '',
+        extensions: baseExtensions(),
+    });
+    
+    this._view = new EditorView({
+        state,
+        parent: this._Element,
+    });
+    
+    this._baseExtensions = baseExtensions;
+};
+
+Qword.prototype.getValue = function() {
+    return this._view.state.doc.toString();
+};
+
+Qword.prototype.setValue = function(value) {
+    if (!this._view) {
+        this._pendingValue = value;
+        return this;
+    }
+    
+    this._view.dispatch({
+        changes: {
+            from: 0,
+            to: this._view.state.doc.length,
+            insert: value,
+        },
+    });
+    
+    return this;
+};
+
+Qword.prototype.focus = function() {
+    this._view.focus();
+    return this;
+};
+
+Qword.prototype.getCursor = function() {
+    const pos = this._view.state.selection.main.head;
+    const line = this._view.state.doc.lineAt(pos);
+    
+    return {
+        row: line.number - 1,
+        column: pos - line.from,
+    };
+};
+
+Qword.prototype.moveCursorTo = function(row, column = 0) {
+    const line = this._view.state.doc.line(row + 1);
+    
+    this._view.dispatch({
+        selection: {
+            anchor: line.from + column,
+        },
+        scrollIntoView: true,
+    });
+    
+    return this;
+};
+
+Qword.prototype.remove = function(direction) {
+    const pos = this._view.state.selection.main.head;
+    
+    this._view.dispatch({
+        changes: direction === 'right' ? {
+            from: pos,
+            to: pos + 1,
+        } : {
+            from: pos - 1,
+            to: pos,
+        },
+    });
+    
+    return this;
+};
+
+Qword.prototype.setModeForPath = function(path) {
+    const ext = path
+        .split('.')
+        .pop();
+    
+    let lang = javascript();
+    
+    if (ext === 'json')
+        lang = json();
+    
+    if (ext === 'html')
+        lang = html();
+    
+    this._view.dispatch({
+        effects: this._langCompartment.reconfigure(lang),
+    });
+    
+    return this;
+};
+
+Qword.prototype.setValueFirst = function(name, value) {
+    this.setModeForPath(name);
+    this.setValue(value);
+    
+    this._FileName = name;
+    this._Value = value;
+    
+    this.moveCursorTo(0, 0);
+    
+    return this;
+};
+
+Qword.prototype.addKeyMap = function(map) {
+    const bindings = Object
+        .entries(map)
+        .map(([key, fn]) => ({
+            key,
+            run: () => {
+                fn.call(this);
+                return true;
+            },
+        }));
+    
+    this._view.dispatch({
+        effects: this._keymapCompartment.reconfigure(keymap.of(bindings)),
+    });
+    
+    return this;
+};
+
+Qword.prototype.on = function(event, fn) {
+    this._Emitter.on(event, fn);
+    return this;
+};
+
+Qword.prototype.emit = function(...args) {
+    this._Emitter.emit(...args);
+    return this;
+};
+
+Qword.prototype.isChanged = function() {
+    return this.getValue() !== this._Value;
+};
+
+Qword.prototype._diff = function(newValue) {
+    return createPatch(this._Value || '', newValue);
+};
+
+Qword.prototype._patchHttp = function(path, patch) {
+    restafary.patch(path, patch, this._onSave.bind(this));
+};
+
+Qword.prototype._writeHttp = function(path, result) {
+    restafary.write(path, result, this._onSave.bind(this));
+};
+
+Qword.prototype.evaluate = function() {
+    if (!this._FileName?.endsWith('.js'))
+        return smalltalk.alert(this._TITLE, 'JS only');
+    
+    const [e] = tryCatch(new Function(this.getValue()));
+    
+    if (e)
+        smalltalk.alert(this._TITLE, e.message);
+    
+    return this;
+};
+
+Qword.prototype.goToLine = function() {
+    const num = Number(prompt('Line number'));
+    
+    if (!num)
+        return;
+    
+    const line = this._view.state.doc.line(num);
+    
+    this._view.dispatch({
+        selection: {
+            anchor: line.from,
+        },
+        scrollIntoView: true,
+    });
+    
+    this.focus();
+};
+
+Qword.prototype._clipboard = _clipboard;
+Qword.prototype.save = save;
+Qword.prototype._onSave = _onSave;
+Qword.prototype._initSocket = _initSocket;
+
+Qword.prototype._onDragOver = function(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+};
+
+Qword.prototype._onDrop = function(event) {
+    event.preventDefault();
+    
+    const [file] = event.dataTransfer.files;
+    
+    if (!file)
+        return;
+    
+    const reader = new FileReader();
+    
+    reader.onload = (e) => {
+        this.setValue(e.target.result);
+    };
+    
+    reader.readAsText(file);
+};
+
+Qword.prototype.sha = function() {
+    const shaObj = new jssha('SHA-1', 'TEXT');
+    shaObj.update(this.getValue());
+    
+    return shaObj.getHash('HEX');
+};
+
+Qword.prototype.setOptions = function(options) {
+    const theme = EditorView.theme({
+        '&': {
+            fontSize: options.fontSize,
+            fontFamily: options.fontFamily,
+        },
+    });
+    
+    this._view.dispatch({
+        effects: this._fontCompartment.reconfigure(theme),
+    });
+    
+    return this;
+};
+
+Qword.prototype.showMessage = showMessage;
+
+Qword.prototype.setKeyMap = function(mode) {
+    this._vimEnabled = mode === 'vim';
+    
+    this._view.dispatch({
+        effects: this._vimCompartment.reconfigure(this._vimEnabled ? vim() : []),
+    });
+    
+    return this;
+};
+
+Qword.prototype._loadOptions = async function() {
+    const url = this._PREFIX + '/options.json';
+    
+    if (this._Options)
+        return this._Options;
+    
+    const data = await load.json(url);
+    
+    this._Options = data;
+    
+    return data;
+};