@kerebron/extension-codejar 0.4.28 → 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);
+  }
+};

package/assets/codejar-linenumbers.css

@@ -1,17 +0,0 @@
-.codejar-linenumbers-inner-wrap {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  overflow: hidden;
-}
-
-.codejar-linenumbers {
-  mix-blend-mode: initial;
-  height: 100%;
-}
-
-.codejar-linenumber {
-  position: relative;
-  top: 0px;
-}

package/assets/codejar.css

@@ -1,135 +0,0 @@
-@import './codejar-linenumbers.css';
-
-.codejar-root {
-  position: relative;
-}
-
-.codejar-root .codejar-select {
-  right: 5px;
-  top: 5px;
-  position: absolute;
-  opacity: 0;
-  z-index: 99999;
-}
-
-.codejar-root:hover .codejar-select {
-  opacity: 1;
-}
-
-.codejar {
-  font-family: monospace;
-}
-
-/* TreeSitter */
-
-.ts-keyword {
-  color: purple;
-  font-weight: bold;
-}
-.ts-string {
-  color: green;
-}
-.ts-comment {
-  color: gray;
-  font-style: italic;
-}
-
-/* Common captures */
-.ts-property {
-  color: #905;
-} /* Property names (e.g., in objects/CSS) */
-.ts-function,
-.ts-function_call {
-  color: #07a;
-} /* Functions */
-.ts-keyword {
-  color: #d73;
-  font-weight: bold;
-} /* Keywords like if, return */
-.ts-string {
-  color: #690;
-} /* Strings */
-.ts-number {
-  color: #099;
-} /* Numbers */
-.ts-comment {
-  color: #998;
-  font-style: italic;
-} /* Comments */
-.ts-perator {
-  color: #9a6;
-} /* Operators like + - = */
-.ts-type {
-  color: #458;
-  font-weight: bold;
-} /* Types */
-.ts-variable {
-  color: #333;
-} /* Variables */
-.ts-constant,
-.ts-constant_builtin {
-  color: #0086b3;
-} /* Constants */
-.ts-punctuation,
-.ts-punctuation_bracket {
-  color: #999;
-} /* Brackets, commas */
-.ts-namespace {
-  color: #000;
-  font-weight: bold;
-}
-
-/* More specific ones */
-.ts-function_builtin {
-  color: #d73;
-}
-.ts-keyword_operator {
-  color: #d73;
-}
-.ts-string_special {
-  color: #d44;
-} /* e.g., regex */
-.ts-tag {
-  color: #008080;
-} /* HTML/XML tags */
-.ts-attribute {
-  color: #e90;
-} /* Attributes */
-
-@media (prefers-color-scheme: dark) {
-  /* Dark mode adjustments */
-  .ts-property {
-    color: #9cdcfe;
-  }
-  .ts-function {
-    color: #dcdcaa;
-  }
-  .ts-keyword {
-    color: #c586c0;
-  }
-  .ts-string {
-    color: #ce9178;
-  }
-  .ts-number {
-    color: #b5cea8;
-  }
-  .ts-comment {
-    color: #6a9955;
-  }
-  .ts-operator {
-    color: #d4d4d4;
-  }
-  .ts-type {
-    color: #4ec9b0;
-  }
-  .ts-constant {
-    color: #4fc1ff;
-  }
-}
-
-.ts-diff_plus {
-  color: green;
-}
-.ts-diff_minus {
-  color: red;
-}