@kerebron/extension-codejar 0.4.27 → 0.4.29

package/src/codeJarLineNumbers.ts

@@ -0,0 +1,129 @@
+// This class was copied from https://github.com/antonmedv/codejar/blob/3.7.0/linenumbers.ts
+// and applied with further improvements and fixes
+
+type Options = {
+  class: string;
+  wrapClass: string;
+  width: string;
+  backgroundColor: string;
+  color: string;
+};
+
+export const lineNumberOptions: Options = {
+  class: 'codejar-linenumbers',
+  wrapClass: 'codejar-wrap',
+  width: '35px',
+  backgroundColor: 'rgba(128, 128, 128, 0.15)',
+  color: '',
+};
+
+export function withLineNumbers(
+  highlight: (e: HTMLElement) => void,
+  options: Partial<Options> = {},
+) {
+  let lineNumbers: HTMLElement;
+  return function (editor: HTMLElement) {
+    highlight(editor);
+
+    if (!lineNumbers) {
+      lineNumbers = initLineNumbers(editor, {
+        ...lineNumberOptions,
+        ...options,
+      });
+      editor.addEventListener(
+        'scroll',
+        () => lineNumbers.style.top = `-${editor.scrollTop}px`,
+      );
+    }
+
+    const code = editor.textContent || '';
+    const linesCount = code.replace(/\n$/g, '').split('\n').length;
+
+    let text = '';
+    for (let i = 0; i < linesCount; i++) {
+      text += `${i + 1}\n`;
+    }
+
+    lineNumbers.innerText = text;
+  };
+}
+
+export function refreshNumbers(
+  lineNumbers: HTMLElement,
+  editor: HTMLElement,
+) {
+  const code = editor.textContent || '';
+  const linesCount = code.replace(/\n$/g, '').split('\n').length;
+
+  let text = '';
+  for (let i = 0; i < linesCount; i++) {
+    text += `${i + 1}\n`;
+  }
+  lineNumbers.innerText = text;
+
+  // Hack editor styles
+  editor.style.paddingLeft = `calc(40px + 5px)`;
+}
+
+export function initLineNumbers(
+  editor: HTMLElement,
+  opts: Options,
+): HTMLElement {
+  const css = getComputedStyle(editor);
+
+  const wrap = document.createElement('div');
+  wrap.className = opts.wrapClass;
+  wrap.style.position = 'relative';
+
+  const innerWrap = document.createElement('div');
+  innerWrap.className = 'codejar-linenumbers-inner-wrap';
+  innerWrap.style.background = css.background;
+  innerWrap.style.marginTop = css.borderTopWidth;
+  innerWrap.style.marginBottom = css.borderBottomWidth;
+  innerWrap.style.marginLeft = css.borderLeftWidth;
+  innerWrap.style.borderTopLeftRadius = css.borderTopLeftRadius;
+  innerWrap.style.borderBottomLeftRadius = css.borderBottomLeftRadius;
+
+  const gutter = document.createElement('div');
+  gutter.className = opts.class;
+  innerWrap.appendChild(gutter);
+
+  wrap.appendChild(innerWrap);
+
+  // Add own styles
+  gutter.style.width = opts.width;
+  gutter.style.overflow = 'hidden';
+  gutter.style.backgroundColor = opts.backgroundColor;
+
+  // Copy editor styles
+  gutter.style.fontFamily = css.fontFamily;
+  gutter.style.fontSize = css.fontSize;
+  gutter.style.lineHeight = css.lineHeight;
+  gutter.style.paddingTop = `calc(${css.paddingTop})`;
+  gutter.style.paddingLeft = css.paddingLeft;
+  gutter.style.borderTopLeftRadius = css.borderTopLeftRadius;
+  gutter.style.borderBottomLeftRadius = css.borderBottomLeftRadius;
+
+  // Add line numbers
+  const lineNumbers = document.createElement('div');
+  lineNumbers.setAttribute('class', 'codejar-linenumber');
+  lineNumbers.style.color = opts.color || css.color;
+  lineNumbers.style.setProperty('mix-blend-mode', 'unset');
+  gutter.appendChild(lineNumbers);
+
+  // Tweak editor styles
+  editor.style.paddingLeft =
+    `calc(${opts.width} + ${gutter.style.paddingLeft} + 5px)`;
+  editor.style.whiteSpace = 'pre';
+
+  // Swap editor with a wrap
+  editor.parentNode!.insertBefore(wrap, editor);
+  wrap.appendChild(editor);
+
+  editor.addEventListener(
+    'scroll',
+    () => lineNumbers.style.top = `-${editor.scrollTop}px`,
+  );
+
+  return lineNumbers;
+}

package/src/mod.ts

@@ -0,0 +1 @@
+export * from './ExtensionCodeJar.js';

package/src/utils.ts

@@ -0,0 +1,77 @@
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { CodeJar } from './CodeJar.js';
+import { TextSelection } from 'prosemirror-state';
+import { off } from 'node:process';
+
+export function computeChange(oldVal: string, newVal: string) {
+  if (oldVal === newVal) return null;
+  let start = 0;
+  let oldEnd = oldVal.length;
+  let newEnd = newVal.length;
+  while (
+    start < oldEnd &&
+    oldVal.charCodeAt(start) === newVal.charCodeAt(start)
+  ) {
+    start += 1;
+  }
+  while (
+    oldEnd > start &&
+    newEnd > start &&
+    oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)
+  ) {
+    oldEnd -= 1;
+    newEnd -= 1;
+  }
+  return { from: start, to: oldEnd, text: newVal.slice(start, newEnd) };
+}
+
+export const valueChanged = (
+  textUpdate: string,
+  node: Node,
+  getPos: () => number | undefined,
+  view: EditorView,
+) => {
+  const change = computeChange(node.textContent, textUpdate);
+
+  if (change) {
+    const pos = getPos();
+    if ('undefined' !== typeof pos) {
+      const start = pos + 1;
+
+      let pmTr = view.state.tr;
+      pmTr = pmTr.replaceWith(
+        start + change.from,
+        start + change.to,
+        change.text ? view.state.schema.text(change.text) : [],
+      );
+      view.dispatch(pmTr);
+    }
+  }
+};
+
+export const forwardSelection = (
+  codejar: CodeJar,
+  pmView: EditorView,
+  getPos: () => number | undefined,
+) => {
+  // if (!cmView.hasFocus) return;
+  const selection = asProseMirrorSelection(pmView.state.doc, codejar, getPos);
+  if (!selection.eq(pmView.state.selection)) {
+    pmView.dispatch(pmView.state.tr.setSelection(selection));
+  }
+};
+
+export const asProseMirrorSelection = (
+  pmDoc: Node,
+  codejar: CodeJar,
+  getPos: () => number | undefined,
+) => {
+  const offset = (typeof getPos === 'function' ? getPos() || 0 : 0) + 1;
+  const pos = codejar.save();
+  if (pos.dir === '<-') {
+    return TextSelection.create(pmDoc, pos.start + offset, pos.end + offset);
+  } else {
+    return TextSelection.create(pmDoc, pos.end + offset, pos.start + offset);
+  }
+};