@inkbrick/react 0.0.0-stage → 0.1.0-alpha.0

package/src/code/scan/generic.ts

@@ -0,0 +1,328 @@
+import type { LanguageDef } from '../languages';
+import type { HighlightTokenType } from '../types';
+import {
+  CHAR_LITERAL,
+  type Emit,
+  IDENT,
+  LIFETIME,
+  NUMBER,
+  REGEX_AFTER_WORD,
+  STRING_PREFIX,
+  isDigit,
+  isSpace,
+  lineEnd,
+  matchAt,
+  nextOnLine,
+  onlyWhitespaceBefore,
+  scanString,
+} from './shared';
+
+interface WordSets {
+  keywords: ReadonlySet<string>;
+  types: ReadonlySet<string>;
+  builtins: ReadonlySet<string>;
+  constants: ReadonlySet<string>;
+}
+
+const setsCache = new WeakMap<LanguageDef, WordSets>();
+
+function wordSets(lang: LanguageDef): WordSets {
+  let sets = setsCache.get(lang);
+
+  if (!sets) {
+    const make = (list = '') =>
+      new Set(
+        list
+          .split(/\s+/)
+          .filter(Boolean)
+          .map((word) => (lang.ignoreCase ? word.toLowerCase() : word)),
+      );
+
+    sets = {
+      keywords: make(lang.keywords),
+      types: make(lang.types),
+      builtins: make(lang.builtins),
+      constants: make(lang.constants),
+    };
+    setsCache.set(lang, sets);
+  }
+
+  return sets;
+}
+
+function classify(
+  word: string,
+  lang: LanguageDef,
+  sets: WordSets,
+  followedByCall: boolean,
+  previousWord: string,
+): HighlightTokenType | null {
+  const key = lang.ignoreCase ? word.toLowerCase() : word;
+  const declared = lang.declarations?.[previousWord];
+
+  if (declared && !sets.keywords.has(key)) return declared;
+  if (sets.keywords.has(key)) return 'keyword';
+  if (sets.constants.has(key)) return 'constant';
+  if (sets.types.has(key)) return 'type';
+  if (sets.builtins.has(key)) return 'builtin';
+  if (followedByCall) return 'function';
+  if (lang.pascalTypes && /^[A-Z]/.test(word) && /[a-z]/.test(word)) return 'type';
+
+  return null;
+}
+
+export function scanGeneric(
+  code: string,
+  lang: LanguageDef,
+  start: number,
+  end: number,
+  emit: Emit,
+) {
+  const sets = wordSets(lang);
+  const quotes = lang.strings ?? '';
+  let i = start;
+  let previousWord = '';
+  /** Последний значимый токен: нужен, чтобы отличить регулярное выражение от деления. */
+  let last = '';
+
+  while (i < end) {
+    const char = code[i];
+
+    if (isSpace(char)) {
+      i++;
+      continue;
+    }
+
+    const lineMarker = lang.lineComment?.find(
+      (marker) =>
+        code.startsWith(marker, i) &&
+        (!lang.commentAtWordStart || i === start || isSpace(code[i - 1])),
+    );
+
+    if (lineMarker) {
+      const stop = lineEnd(code, i, end);
+
+      emit(i, stop, 'comment');
+      i = stop;
+      previousWord = '';
+      continue;
+    }
+
+    if (lang.blockComment && code.startsWith(lang.blockComment[0], i)) {
+      const close = code.indexOf(lang.blockComment[1], i + lang.blockComment[0].length);
+      const stop =
+        close < 0 || close + lang.blockComment[1].length > end
+          ? end
+          : close + lang.blockComment[1].length;
+
+      emit(i, stop, 'comment');
+      i = stop;
+      previousWord = '';
+      continue;
+    }
+
+    if (lang.preprocessor && char === '#' && onlyWhitespaceBefore(code, i, start)) {
+      const stop = lineEnd(code, i, end);
+
+      emit(i, stop, 'meta');
+      i = stop;
+      previousWord = '';
+      continue;
+    }
+
+    if (
+      lang.rustAttributes &&
+      char === '#' &&
+      (code[i + 1] === '[' || code.startsWith('![', i + 1))
+    ) {
+      let depth = 0;
+      let stop = i;
+
+      for (; stop < end; stop++) {
+        if (code[stop] === '[') depth++;
+        else if (code[stop] === ']' && --depth <= 0) {
+          stop++;
+          break;
+        } else if (code[stop] === '\n') break;
+      }
+
+      emit(i, stop, 'meta');
+      i = stop;
+      previousWord = '';
+      continue;
+    }
+
+    if (lang.lifetimes && char === "'") {
+      const literal = matchAt(CHAR_LITERAL, code, i);
+
+      if (literal) {
+        emit(i, i + literal.length, 'string');
+        i += literal.length;
+      } else {
+        const lifetime = matchAt(LIFETIME, code, i);
+
+        if (lifetime) emit(i, i + lifetime.length, 'type');
+        i += lifetime ? lifetime.length : 1;
+      }
+
+      previousWord = '';
+      last = 'value';
+      continue;
+    }
+
+    if (quotes.includes(char)) {
+      const triple = lang.triple === true && code.startsWith(char.repeat(3), i);
+      const stop = scanString(
+        code,
+        i,
+        end,
+        char,
+        triple,
+        triple || (lang.multiline ?? '').includes(char),
+      );
+      let type: HighlightTokenType = 'string';
+
+      if (lang.stringKeys && code[nextOnLine(code, stop, end)] === ':') type = 'property';
+
+      emit(i, stop, type);
+      i = stop;
+      previousWord = '';
+      last = 'value';
+      continue;
+    }
+
+    if (isDigit(char) || (char === '.' && isDigit(code[i + 1]))) {
+      const number = matchAt(NUMBER, code, i) ?? char;
+
+      emit(i, i + number.length, 'number');
+      i += number.length;
+      previousWord = '';
+      last = 'value';
+      continue;
+    }
+
+    if (lang.dollar && char === '$') {
+      let stop = i + 1;
+
+      if (code[stop] === '{') {
+        const close = code.indexOf('}', stop);
+
+        stop = close < 0 || close >= end ? lineEnd(code, stop, end) : close + 1;
+      } else if (/[\w@?#*!$-]/.test(code[stop] ?? '')) {
+        const word = matchAt(/\w+|[@?#*!$-]/y, code, stop);
+
+        stop += word ? word.length : 1;
+      }
+
+      if (stop > i + 1) emit(i, stop, 'variable');
+      i = Math.max(stop, i + 1);
+      previousWord = '';
+      last = 'value';
+      continue;
+    }
+
+    if (
+      lang.flags &&
+      char === '-' &&
+      (i === start || isSpace(code[i - 1])) &&
+      /[A-Za-z-]/.test(code[i + 1] ?? '')
+    ) {
+      let stop = i + 1;
+
+      while (stop < end && !isSpace(code[stop]) && code[stop] !== '=') stop++;
+
+      emit(i, stop, 'attribute');
+      i = stop;
+      previousWord = '';
+      continue;
+    }
+
+    if (lang.at && char === '@') {
+      const name = matchAt(/[A-Za-z_]\w*(?:\.[A-Za-z_]\w*)*/y, code, i + 1);
+
+      if (name) {
+        emit(i, i + 1 + name.length, 'meta');
+        i += 1 + name.length;
+        previousWord = '';
+        continue;
+      }
+    }
+
+    const word = matchAt(IDENT, code, i);
+
+    if (word) {
+      const stop = i + word.length;
+
+      if (
+        lang.stringPrefixes &&
+        STRING_PREFIX.test(word) &&
+        stop < end &&
+        quotes.includes(code[stop])
+      ) {
+        const quote = code[stop];
+        const triple = lang.triple === true && code.startsWith(quote.repeat(3), stop);
+
+        const close = scanString(code, stop, end, quote, triple, triple);
+
+        emit(i, close, 'string');
+        i = close;
+        previousWord = '';
+        last = 'value';
+        continue;
+      }
+
+      if (lang.macros && code[stop] === '!' && code[stop + 1] !== '=') {
+        emit(i, stop + 1, 'function');
+        i = stop + 1;
+        previousWord = '';
+        last = 'value';
+        continue;
+      }
+
+      const followedByCall = code[nextOnLine(code, stop, end)] === '(';
+      const type = classify(word, lang, sets, followedByCall, previousWord);
+
+      if (type) emit(i, stop, type);
+
+      previousWord = word;
+      last = `word:${word}`;
+      i = stop;
+      continue;
+    }
+
+    if (lang.regex && char === '/') {
+      const afterWord = last.startsWith('word:') && REGEX_AFTER_WORD.has(last.slice(5));
+      const allowed = last === '' || last.length === 1 || afterWord;
+
+      if (allowed) {
+        let stop = i + 1;
+        let inClass = false;
+
+        while (stop < end && code[stop] !== '\n') {
+          if (code[stop] === '\\') stop++;
+          else if (code[stop] === '[') inClass = true;
+          else if (code[stop] === ']') inClass = false;
+          else if (code[stop] === '/' && !inClass) break;
+
+          stop++;
+        }
+
+        if (code[stop] === '/') {
+          stop++;
+
+          while (stop < end && /[a-z]/i.test(code[stop])) stop++;
+
+          emit(i, stop, 'regex');
+          i = stop;
+          previousWord = '';
+          last = 'value';
+          continue;
+        }
+      }
+    }
+
+    previousWord = '';
+    last = char === ')' || char === ']' || char === '}' ? 'value' : char;
+    i++;
+  }
+}

package/src/code/scan/html.ts

@@ -0,0 +1,129 @@
+import { LANGUAGES } from '../languages';
+import { scanCss } from './css';
+import { scanGeneric } from './generic';
+import { type Emit, isSpace, matchAt } from './shared';
+
+const ENTITY = /&(?:#\d+|#x[\da-fA-F]+|[A-Za-z]\w*);/g;
+
+function emitEntities(code: string, from: number, to: number, emit: Emit) {
+  ENTITY.lastIndex = from;
+
+  for (let match = ENTITY.exec(code); match && match.index < to; match = ENTITY.exec(code)) {
+    if (match.index + match[0].length <= to)
+      emit(match.index, match.index + match[0].length, 'constant');
+  }
+}
+
+export function scanHtml(code: string, start: number, end: number, emit: Emit) {
+  let i = start;
+
+  while (i < end) {
+    const open = code.indexOf('<', i);
+
+    if (open < 0 || open >= end) {
+      emitEntities(code, i, end, emit);
+      return;
+    }
+
+    emitEntities(code, i, open, emit);
+
+    if (code.startsWith('<!--', open)) {
+      const close = code.indexOf('-->', open + 4);
+      const stop = close < 0 || close + 3 > end ? end : close + 3;
+
+      emit(open, stop, 'comment');
+      i = stop;
+      continue;
+    }
+
+    if (code.startsWith('<!', open) || code.startsWith('<?', open)) {
+      const close = code.indexOf('>', open);
+      const stop = close < 0 || close >= end ? end : close + 1;
+
+      emit(open, stop, 'meta');
+      i = stop;
+      continue;
+    }
+
+    const name = matchAt(/<\/?[A-Za-z][\w:.-]*/y, code, open);
+
+    if (!name) {
+      i = open + 1;
+      continue;
+    }
+
+    emit(open, open + name.length, 'tag');
+    i = open + name.length;
+
+    let selfClosing = false;
+
+    while (i < end) {
+      while (i < end && isSpace(code[i])) i++;
+
+      if (code[i] === '>') {
+        emit(i, i + 1, 'tag');
+        i++;
+        break;
+      }
+
+      if (code.startsWith('/>', i)) {
+        emit(i, i + 2, 'tag');
+        selfClosing = true;
+        i += 2;
+        break;
+      }
+
+      const attribute = matchAt(/[^\s=<>"'/]+/y, code, i);
+
+      if (!attribute) {
+        i++;
+        continue;
+      }
+
+      emit(i, i + attribute.length, 'attribute');
+      i += attribute.length;
+
+      let after = i;
+
+      while (after < end && isSpace(code[after])) after++;
+
+      if (code[after] !== '=') continue;
+
+      after++;
+
+      while (after < end && isSpace(code[after])) after++;
+
+      const quote = code[after];
+
+      if (quote === '"' || quote === "'") {
+        const close = code.indexOf(quote, after + 1);
+        const stop = close < 0 || close >= end ? end : close + 1;
+
+        emit(after, stop, 'string');
+        i = stop;
+      } else {
+        const value = matchAt(/[^\s>]+/y, code, after);
+
+        if (value) emit(after, after + value.length, 'string');
+        i = after + (value ? value.length : 0);
+      }
+    }
+
+    const tag = name.replace(/^<\/?/, '').toLowerCase();
+
+    if (
+      !selfClosing &&
+      !name.startsWith('</') &&
+      (tag === 'script' || tag === 'style') &&
+      i < end
+    ) {
+      const close = code.toLowerCase().indexOf(`</${tag}`, i);
+      const stop = close < 0 || close > end ? end : close;
+
+      if (tag === 'script') scanGeneric(code, LANGUAGES.javascript, i, stop, emit);
+      else scanCss(code, i, stop, emit);
+
+      i = stop;
+    }
+  }
+}

package/src/code/scan/markdown.ts

@@ -0,0 +1,58 @@
+import { type Emit, lineEnd } from './shared';
+
+const MARKDOWN_INLINE = /`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\[[^\]\n]*\]\([^)\n]*\)/g;
+
+export function scanMarkdown(code: string, start: number, end: number, emit: Emit) {
+  let inFence = false;
+  let lineStart = start;
+
+  while (lineStart <= end) {
+    const stop = lineEnd(code, lineStart, end);
+    const line = code.slice(lineStart, stop);
+
+    if (/^\s*(```|~~~)/.test(line)) {
+      emit(lineStart, stop, 'meta');
+      inFence = !inFence;
+    } else if (inFence) {
+      emit(lineStart, stop, 'string');
+    } else if (/^#{1,6}\s/.test(line)) {
+      emit(lineStart, stop, 'keyword');
+    } else if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      emit(lineStart, stop, 'meta');
+    } else {
+      let offset = 0;
+      const marker = /^\s*(?:>|[-*+]\s|\d+[.)]\s)/.exec(line);
+
+      if (marker) {
+        const length = marker[0].trimEnd().length;
+
+        emit(
+          lineStart + marker[0].length - marker[0].trimStart().length,
+          lineStart + length,
+          'keyword',
+        );
+        offset = marker[0].length;
+      }
+
+      MARKDOWN_INLINE.lastIndex = offset;
+
+      for (let match = MARKDOWN_INLINE.exec(line); match; match = MARKDOWN_INLINE.exec(line)) {
+        const from = lineStart + match.index;
+        const text = match[0];
+
+        if (text.startsWith('[')) {
+          const split = text.indexOf('](');
+
+          emit(from, from + split + 1, 'function');
+          emit(from + split + 1, from + text.length, 'string');
+        } else {
+          emit(from, from + text.length, text.startsWith('`') ? 'string' : 'keyword');
+        }
+      }
+    }
+
+    if (stop >= end) break;
+
+    lineStart = stop + 1;
+  }
+}

package/src/code/scan/shared.ts

@@ -0,0 +1,81 @@
+import type { HighlightTokenType } from '../types';
+
+export type Emit = (from: number, to: number, type: HighlightTokenType) => void;
+
+export const IDENT = /[A-Za-z_$À-￿][\w$À-￿]*/y;
+export const NUMBER =
+  /(?:0[xX][\da-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|(?:\d[\d_]*(?:\.[\d_]+)?|\.\d[\d_]*)(?:[eE][+-]?\d+)?)[a-zA-Z]*/y;
+export const CHAR_LITERAL = /'(?:\\.|[^'\\\n])'/y;
+export const LIFETIME = /'[A-Za-z_]\w*/y;
+export const STRING_PREFIX = /^[rRbBfFuU]{1,3}$/;
+export const REGEX_AFTER_WORD = new Set(
+  'return typeof case delete void throw in of new else do yield await'.split(' '),
+);
+
+export const matchAt = (re: RegExp, code: string, at: number): string | null => {
+  re.lastIndex = at;
+
+  const match = re.exec(code);
+
+  return match ? match[0] : null;
+};
+
+export const isDigit = (char: string | undefined) =>
+  char !== undefined && char >= '0' && char <= '9';
+export const isSpace = (char: string | undefined) =>
+  char === ' ' || char === '\t' || char === '\n' || char === '\r';
+
+export function lineEnd(code: string, from: number, end: number): number {
+  const index = code.indexOf('\n', from);
+
+  return index < 0 || index > end ? end : index;
+}
+
+export function nextOnLine(code: string, from: number, end: number): number {
+  let i = from;
+
+  while (i < end && (code[i] === ' ' || code[i] === '\t')) i++;
+
+  return i;
+}
+
+export function onlyWhitespaceBefore(code: string, at: number, start: number): boolean {
+  for (let i = at - 1; i >= start && code[i] !== '\n'; i--) {
+    if (code[i] !== ' ' && code[i] !== '\t') return false;
+  }
+
+  return true;
+}
+
+export function scanString(
+  code: string,
+  start: number,
+  end: number,
+  quote: string,
+  triple: boolean,
+  multiline: boolean,
+): number {
+  const closing = quote.repeat(3);
+  let i = start + (triple ? 3 : 1);
+
+  while (i < end) {
+    const char = code[i];
+
+    if (char === '\\') {
+      i += 2;
+      continue;
+    }
+
+    if (triple) {
+      if (code.startsWith(closing, i)) return i + 3;
+    } else if (char === quote) {
+      return i + 1;
+    } else if (char === '\n' && !multiline) {
+      return i;
+    }
+
+    i++;
+  }
+
+  return end;
+}

package/src/code/scan/yaml.ts

@@ -0,0 +1,34 @@
+import { LANGUAGES } from '../languages';
+import { scanGeneric } from './generic';
+import { type Emit, lineEnd } from './shared';
+
+const YAML_KEY = /^(\s*(?:-\s+)*)("[^"]*"|'[^']*'|[^\s#:'"[\]{},&*!|>-][^#:]*?)\s*:(?=\s|$)/;
+
+export function scanYaml(code: string, start: number, end: number, emit: Emit) {
+  let lineStart = start;
+
+  while (lineStart <= end) {
+    const stop = lineEnd(code, lineStart, end);
+    const line = code.slice(lineStart, stop);
+
+    if (/^(---|\.\.\.)\s*$/.test(line)) {
+      emit(lineStart, stop, 'meta');
+    } else {
+      const key = YAML_KEY.exec(line);
+      let restStart = lineStart;
+
+      if (key) {
+        const keyFrom = lineStart + key[1].length;
+
+        emit(keyFrom, keyFrom + key[2].length, 'property');
+        restStart = lineStart + key[0].length;
+      }
+
+      scanGeneric(code, LANGUAGES.yaml, restStart, stop, emit);
+    }
+
+    if (stop >= end) break;
+
+    lineStart = stop + 1;
+  }
+}

package/src/code/types.ts

@@ -0,0 +1,34 @@
+/**
+ * Тип токена подсветки. Стандартные типы получают цвета из `@inkbrick/styles` (`--inkbrick-syntax-*`); свой подсветчик может
+ * вернуть и любой другой тип — он попадёт в `data-inkbrick-token` как есть, и вы раскрасите его своим CSS.
+ */
+export type HighlightTokenType =
+  | 'keyword'
+  | 'string'
+  | 'comment'
+  | 'number'
+  | 'function'
+  | 'type'
+  | 'constant'
+  | 'builtin'
+  | 'variable'
+  | 'property'
+  | 'tag'
+  | 'attribute'
+  | 'meta'
+  | 'regex'
+  | (string & {});
+
+export interface HighlightToken {
+  readonly from: number;
+  readonly to: number;
+  readonly type: HighlightTokenType;
+}
+
+/**
+ * Подсветчик кода: по тексту и языку (`props.language` блока) возвращает токены. Результат не обязан быть
+ * упорядоченным и не должен быть идеальным: пересечения, выход за границы и неверные типы отбрасываются, а текст
+ * блока подсветка изменить не может. Встроенный подсветчик — `highlightCode`; подключить Shiki, Prism или
+ * highlight.js можно, обернув их в такую функцию (`<EditorProvider highlighter={…}>`).
+ */
+export type CodeHighlighter = (code: string, language: string) => readonly HighlightToken[];

package/src/context/EditorContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+
+export const EditorContext = createContext<Editor | null>(null);
+
+export const EditorViewContext = createContext<EditorView | null>(null);