@difizen/libro-codemirror 0.0.2-alpha.0

package/es/auto-complete/tooltip.js

@@ -0,0 +1,365 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/* eslint-disable no-param-reassign */
+/* eslint-disable @typescript-eslint/no-parameter-properties */
+/* eslint-disable @typescript-eslint/parameter-properties */
+/* eslint-disable prefer-const */
+
+import { Direction, logException } from '@codemirror/view';
+import { applyCompletion } from "./completion.js";
+import { completionConfig } from "./config.js";
+import { Info } from "./theme.js";
+function optionContent(config) {
+  var content = config.addToOptions.slice();
+  if (config.icons) {
+    content.push({
+      render: function render(completion) {
+        var icon = document.createElement('div');
+        icon.classList.add('cm-completionIcon');
+        if (completion.type) {
+          var _icon$classList;
+          (_icon$classList = icon.classList).add.apply(_icon$classList, _toConsumableArray(completion.type.split(/\s+/g).map(function (cls) {
+            return 'cm-completionIcon-' + cls;
+          })));
+        }
+        icon.setAttribute('aria-hidden', 'true');
+        return icon;
+      },
+      position: 20
+    });
+  }
+  content.push({
+    render: function render(completion, _s, match) {
+      var labelElt = document.createElement('span');
+      labelElt.className = 'cm-completionLabel';
+      var label = completion.label,
+        off = 0;
+      for (var j = 1; j < match.length;) {
+        var from = match[j++],
+          to = match[j++];
+        if (from > off) {
+          labelElt.appendChild(document.createTextNode(label.slice(off, from)));
+        }
+        var span = labelElt.appendChild(document.createElement('span'));
+        span.appendChild(document.createTextNode(label.slice(from, to)));
+        span.className = 'cm-completionMatchedText';
+        off = to;
+      }
+      if (off < label.length) {
+        labelElt.appendChild(document.createTextNode(label.slice(off)));
+      }
+      return labelElt;
+    },
+    position: 50
+  }, {
+    render: function render(completion) {
+      if (!completion.detail) {
+        return null;
+      }
+      var detailElt = document.createElement('span');
+      detailElt.className = 'cm-completionDetail';
+      detailElt.textContent = completion.detail;
+      return detailElt;
+    },
+    position: 80
+  });
+  return content.sort(function (a, b) {
+    return a.position - b.position;
+  }).map(function (a) {
+    return a.render;
+  });
+}
+function rangeAroundSelected(total, selected, max) {
+  if (total <= max) {
+    return {
+      from: 0,
+      to: total
+    };
+  }
+  if (selected < 0) {
+    selected = 0;
+  }
+  if (selected <= total >> 1) {
+    var _off = Math.floor(selected / max);
+    return {
+      from: _off * max,
+      to: (_off + 1) * max
+    };
+  }
+  var off = Math.floor((total - selected) / max);
+  return {
+    from: total - (off + 1) * max,
+    to: total - off * max
+  };
+}
+var CompletionTooltip = /*#__PURE__*/function () {
+  function CompletionTooltip(view, stateField) {
+    var _this = this;
+    _classCallCheck(this, CompletionTooltip);
+    this.view = view;
+    this.stateField = stateField;
+    this.info = null;
+    this.placeInfo = {
+      read: function read() {
+        return _this.measureInfo();
+      },
+      write: function write(pos) {
+        return _this.positionInfo(pos);
+      },
+      key: this
+    };
+    var cState = view.state.field(stateField);
+    var _ref = cState.open,
+      options = _ref.options,
+      selected = _ref.selected;
+    var config = view.state.facet(completionConfig);
+    this.optionContent = optionContent(config);
+    this.optionClass = config.optionClass;
+    this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
+    this.dom = document.createElement('div');
+    this.dom.className = 'cm-tooltip-autocomplete';
+    this.dom.addEventListener('mousedown', function (e) {
+      for (var dom = e.target, _match; dom && dom !== _this.dom; dom = dom.parentNode) {
+        if (dom.nodeName === 'LI' && (_match = /-(\d+)$/.exec(dom.id)) && +_match[1] < options.length) {
+          applyCompletion(view, options[+_match[1]]);
+          e.preventDefault();
+          return;
+        }
+      }
+    });
+    this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
+    this.list.addEventListener('scroll', function () {
+      if (_this.info) {
+        _this.view.requestMeasure(_this.placeInfo);
+      }
+    });
+  }
+  _createClass(CompletionTooltip, [{
+    key: "mount",
+    value: function mount() {
+      this.updateSel();
+    }
+  }, {
+    key: "update",
+    value: function update(_update) {
+      if (_update.state.field(this.stateField) !== _update.startState.field(this.stateField)) {
+        this.updateSel();
+      }
+    }
+  }, {
+    key: "positioned",
+    value: function positioned() {
+      if (this.info) {
+        this.view.requestMeasure(this.placeInfo);
+      }
+    }
+  }, {
+    key: "updateSel",
+    value: function updateSel() {
+      var _this2 = this;
+      var cState = this.view.state.field(this.stateField),
+        open = cState.open;
+      if (open.selected > -1 && open.selected < this.range.from || open.selected >= this.range.to) {
+        this.range = rangeAroundSelected(open.options.length, open.selected, this.view.state.facet(completionConfig).maxRenderedOptions);
+        this.list.remove();
+        this.list = this.dom.appendChild(this.createListBox(open.options, cState.id, this.range));
+        this.list.addEventListener('scroll', function () {
+          if (_this2.info) {
+            _this2.view.requestMeasure(_this2.placeInfo);
+          }
+        });
+      }
+      if (this.updateSelectedOption(open.selected)) {
+        if (this.info) {
+          this.info.remove();
+          this.info = null;
+        }
+        var _completion = open.options[open.selected].completion;
+        var info = _completion.info;
+        if (!info) {
+          return;
+        }
+        var infoResult = typeof info === 'string' ? document.createTextNode(info) : info(_completion);
+        if (!infoResult) {
+          return;
+        }
+        if ('then' in infoResult) {
+          infoResult.then(function (node) {
+            if (node && _this2.view.state.field(_this2.stateField, false) === cState) {
+              return _this2.addInfoPane(node);
+            }
+            return undefined;
+          }).catch(function (e) {
+            return logException(_this2.view.state, e, 'completion info');
+          });
+        } else {
+          this.addInfoPane(infoResult);
+        }
+      }
+    }
+  }, {
+    key: "addInfoPane",
+    value: function addInfoPane(content) {
+      var dom = this.info = document.createElement('div');
+      dom.className = 'cm-tooltip cm-completionInfo';
+      dom.appendChild(content);
+      this.dom.appendChild(dom);
+      this.view.requestMeasure(this.placeInfo);
+    }
+  }, {
+    key: "updateSelectedOption",
+    value: function updateSelectedOption(selected) {
+      var set = null;
+      for (var opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
+        if (i === selected) {
+          if (!opt.hasAttribute('aria-selected')) {
+            opt.setAttribute('aria-selected', 'true');
+            set = opt;
+          }
+        } else {
+          if (opt.hasAttribute('aria-selected')) {
+            opt.removeAttribute('aria-selected');
+          }
+        }
+      }
+      if (set) {
+        scrollIntoView(this.list, set);
+      }
+      return set;
+    }
+  }, {
+    key: "measureInfo",
+    value: function measureInfo() {
+      var sel = this.dom.querySelector('[aria-selected]');
+      if (!sel || !this.info) {
+        return null;
+      }
+      var win = this.dom.ownerDocument.defaultView || window;
+      var listRect = this.dom.getBoundingClientRect();
+      var infoRect = this.info.getBoundingClientRect();
+      var selRect = sel.getBoundingClientRect();
+      if (selRect.top > Math.min(win.innerHeight, listRect.bottom) - 10 || selRect.bottom < Math.max(0, listRect.top) + 10) {
+        return null;
+      }
+      var rtl = this.view.textDirection === Direction.RTL,
+        left = rtl,
+        narrow = false,
+        maxWidth;
+      var top = '',
+        bottom = '';
+      var spaceLeft = listRect.left,
+        spaceRight = win.innerWidth - listRect.right;
+      if (left && spaceLeft < Math.min(infoRect.width, spaceRight)) {
+        left = false;
+      } else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft)) {
+        left = true;
+      }
+      if (infoRect.width <= (left ? spaceLeft : spaceRight)) {
+        top = Math.max(0, Math.min(selRect.top, win.innerHeight - infoRect.height)) - listRect.top + 'px';
+        maxWidth = Math.min(Info.Width, left ? spaceLeft : spaceRight) + 'px';
+      } else {
+        narrow = true;
+        maxWidth = Math.min(Info.Width, (rtl ? listRect.right : win.innerWidth - listRect.left) - Info.Margin) + 'px';
+        var spaceBelow = win.innerHeight - listRect.bottom;
+        if (spaceBelow >= infoRect.height || spaceBelow > listRect.top) {
+          // Below the completion
+          top = selRect.bottom - listRect.top + 'px';
+        }
+        // Above it
+        else {
+          bottom = listRect.bottom - selRect.top + 'px';
+        }
+      }
+      return {
+        top: top,
+        bottom: bottom,
+        maxWidth: maxWidth,
+        class: narrow ? rtl ? 'left-narrow' : 'right-narrow' : left ? 'left' : 'right'
+      };
+    }
+  }, {
+    key: "positionInfo",
+    value: function positionInfo(pos) {
+      if (this.info) {
+        if (pos) {
+          this.info.style.top = pos.top;
+          this.info.style.bottom = pos.bottom;
+          this.info.style.maxWidth = pos.maxWidth;
+          this.info.className = 'cm-tooltip cm-completionInfo cm-completionInfo-' + pos.class;
+        } else {
+          this.info.style.top = '-1e6px';
+        }
+      }
+    }
+  }, {
+    key: "createListBox",
+    value: function createListBox(options, id, range) {
+      var ul = document.createElement('ul');
+      ul.id = id;
+      ul.setAttribute('role', 'listbox');
+      ul.setAttribute('aria-expanded', 'true');
+      ul.setAttribute('aria-label', this.view.state.phrase('Completions'));
+      for (var i = range.from; i < range.to; i++) {
+        var _options$i = options[i],
+          _completion2 = _options$i.completion,
+          _match2 = _options$i.match;
+        var li = ul.appendChild(document.createElement('li'));
+        li.id = id + '-' + i;
+        li.setAttribute('role', 'option');
+        var cls = this.optionClass(_completion2);
+        if (cls) {
+          li.className = cls;
+        }
+        var _iterator = _createForOfIteratorHelper(this.optionContent),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var source = _step.value;
+            var node = source(_completion2, this.view.state, _match2);
+            if (node) {
+              li.appendChild(node);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      if (range.from) {
+        ul.classList.add('cm-completionListIncompleteTop');
+      }
+      if (range.to < options.length) {
+        ul.classList.add('cm-completionListIncompleteBottom');
+      }
+      return ul;
+    }
+  }]);
+  return CompletionTooltip;
+}(); // We allocate a new function instance every time the completion
+// changes to force redrawing/repositioning of the tooltip
+export function completionTooltip(stateField) {
+  return function (view) {
+    return new CompletionTooltip(view, stateField);
+  };
+}
+function scrollIntoView(container, element) {
+  var parent = container.getBoundingClientRect();
+  var self = element.getBoundingClientRect();
+  if (self.top < parent.top) {
+    container.scrollTop -= parent.top - self.top;
+  } else if (self.bottom > parent.bottom) {
+    container.scrollTop += self.bottom - parent.bottom;
+  }
+}

package/es/auto-complete/view.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="node" resolution-mode="require"/>
+/// <reference types="node" resolution-mode="require"/>
+/// <reference types="node" resolution-mode="require"/>
+/// <reference types="node" resolution-mode="require"/>
+/// <reference types="node" resolution-mode="require"/>
+import type { Transaction } from '@codemirror/state';
+import type { EditorView, Command, ViewUpdate } from '@codemirror/view';
+import { ViewPlugin } from '@codemirror/view';
+import type { CompletionResult } from './completion.js';
+import { CompletionContext } from './completion.js';
+import { ActiveSource } from './state.js';
+export declare function moveCompletionSelection(forward: boolean, by?: 'option' | 'page'): Command;
+export declare const acceptCompletion: Command;
+export declare const startCompletion: Command;
+export declare const closeCompletion: Command;
+declare class RunningQuery {
+    readonly active: ActiveSource;
+    readonly context: CompletionContext;
+    time: number;
+    updates: Transaction[];
+    done: undefined | CompletionResult | null;
+    constructor(active: ActiveSource, context: CompletionContext);
+}
+declare const enum CompositionState {
+    None = 0,
+    Started = 1,
+    Changed = 2,
+    ChangedAndMoved = 3
+}
+export declare const completionPlugin: ViewPlugin<{
+    debounceUpdate: NodeJS.Timeout | -1;
+    running: RunningQuery[];
+    debounceAccept: NodeJS.Timeout | -1;
+    composing: CompositionState;
+    readonly view: EditorView;
+    update(update: ViewUpdate): void;
+    startUpdate(): void;
+    startQuery(active: ActiveSource): void;
+    scheduleAccept(): void;
+    accept(): void;
+}>;
+export {};
+//# sourceMappingURL=view.d.ts.map

package/es/auto-complete/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/auto-complete/view.ts"],"names":[],"mappings":";;;;;AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EACV,UAAU,EACV,OAAO,EAEP,UAAU,EAEX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAA4B,MAAM,kBAAkB,CAAC;AAExE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAO,iBAAiB,EAAmB,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAOL,YAAY,EAGb,MAAM,YAAY,CAAC;AAIpB,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,OAAO,EAChB,EAAE,GAAE,QAAQ,GAAG,MAAiB,GAC/B,OAAO,CAqCT;AAGD,eAAO,MAAM,gBAAgB,EAAE,OAc9B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,OAO7B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,OAO7B,CAAC;AAEF,cAAM,YAAY;IAQd,QAAQ,CAAC,MAAM,EAAE,YAAY;IAC7B,QAAQ,CAAC,OAAO,EAAE,iBAAiB;IARrC,IAAI,SAAc;IAClB,OAAO,EAAE,WAAW,EAAE,CAAM;IAG5B,IAAI,EAAE,SAAS,GAAG,gBAAgB,GAAG,IAAI,CAAa;gBAG3C,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,iBAAiB;CAEtC;AAMD,mBAAW,gBAAgB;IACzB,IAAI,IAAA;IACJ,OAAO,IAAA;IACP,OAAO,IAAA;IACP,eAAe,IAAA;CAChB;AAED,eAAO,MAAM,gBAAgB;oBAET,OAAO,OAAO,GAAG,CAAC,CAAC;aAC1B,YAAY,EAAE;oBACP,OAAO,OAAO,GAAG,CAAC,CAAC;;mBAGR,UAAU;mBAQtB,UAAU;;uBAsEN,YAAY;;;EA6HlC,CAAC"}