@threadlabs/looma 0.16.5 → 0.17.0

package/editor/chunks/extensions.js

@@ -5,7 +5,7 @@ import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
-import { common, createLowlight } from "lowlight";
+import { createLowlight } from "lowlight";
 import { DOMParser, Node as Node$2, Slice } from "@tiptap/pm/model";
 import MarkdownIt from "markdown-it";
 import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, moveTableColumn, moveTableRow, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
@@ -9206,7 +9206,6 @@ var StoredOnlyHighlight = Highlight.extend({
 	addInputRules: () => [],
 	addPasteRules: () => []
 });
-var lowlight = createLowlight(common);
 /**
 * Complete Looma table schema as one Tiptap extension.
 * Use this in presets that want table, row, header, and cell nodes to remain an
@@ -9246,7 +9245,7 @@ function getLoomaTableExtensions() {
 * framework's Tiptap editor hook.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false } = options;
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages } = options;
 	return [
 		Document,
 		Paragraph,
@@ -9284,7 +9283,7 @@ function getDefaultEditorExtensions(options = {}) {
 		(disableHighlight ? StoredOnlyHighlight : Highlight).configure({ multicolor: false }),
 		Code,
 		LoomaSmartPaste,
-		CodeBlockLowlight.configure({ lowlight }),
+		CodeBlockLowlight.configure({ lowlight: createLowlight(codeLanguages) }),
 		Typography,
 		Placeholder.configure({
 			placeholder: ({ node }) => node.type.name === "paragraph" ? placeholder : "",

package/editor/extensions/index.d.ts

@@ -9,7 +9,7 @@
 export { LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LoomaActiveBlock, LoomaActiveBlockPluginKey, } from "./active-block.js";
 export { LoomaCallout, LOOMA_CALLOUT_TONES, type LoomaCalloutTone, } from "./callout.js";
 export { LoomaChip, LOOMA_CHIP_COLORS, normalizeLoomaChipColor, type LoomaChipColor } from "./chip.js";
-export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, } from "./preset.js";
+export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, type LoomaCodeLanguages, } from "./preset.js";
 export { LoomaSmartPaste } from "./smart-paste.js";
 export { getActiveTableUiState, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, shouldShowTextFormattingToolbar, type ActiveTableUiState, type InsertTableAtRangeOptions, type TableActionCapabilities, } from "./table-commands.js";
 export { LoomaTable, getActiveTableCellAlignment, getActiveTableCellBackground, LoomaTableCell, LoomaTableHeader, setActiveTableCellAlignment, setActiveTableCellBackground, TABLE_CELL_BACKGROUND_PRESETS, type TableCellAlignment, type TableCellBackground, } from "./table-formatting.js";

package/editor/extensions/preset.d.ts

@@ -3,6 +3,9 @@
  * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
  */
 import { type AnyExtension } from "@tiptap/core";
+import { createLowlight } from "lowlight";
+/** Grammars supplied by the host; importing a language remains the host's choice. */
+export type LoomaCodeLanguages = NonNullable<Parameters<typeof createLowlight>[0]>;
 /**
  * Deliberate policy knobs in Looma's default extension set.
  * Consumers needing different schemas should compose an explicit Tiptap list
@@ -24,6 +27,8 @@ export interface DefaultEditorExtensionsOptions {
      * and render. Use it when the application reserves highlighting for itself.
      */
     disableHighlight?: boolean;
+    /** Code block grammars to register. None are loaded by default. */
+    codeLanguages?: LoomaCodeLanguages;
 }
 /**
  * Complete Looma table schema as one Tiptap extension.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.16.5",
+  "version": "0.17.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/components.css

@@ -8489,6 +8489,27 @@ html[data-ui-input-modality="touch"]
   background: none;
 }
 
+.looma-editor .ProseMirror pre :is(.hljs-keyword, .hljs-literal, .hljs-selector-tag) {
+  color: var(--ui-editor-code-keyword, var(--ui-accent-solid));
+}
+
+.looma-editor .ProseMirror pre :is(.hljs-string, .hljs-attr, .hljs-addition) {
+  color: var(--ui-editor-code-string, var(--ui-success-subtle-text));
+}
+
+.looma-editor .ProseMirror pre :is(.hljs-number, .hljs-type, .hljs-built_in) {
+  color: var(--ui-editor-code-number, var(--ui-warning-subtle-text));
+}
+
+.looma-editor .ProseMirror pre :is(.hljs-title, .hljs-function, .hljs-variable) {
+  color: var(--ui-editor-code-name, var(--ui-info-subtle-text));
+}
+
+.looma-editor .ProseMirror pre .hljs-comment {
+  color: var(--ui-editor-code-comment, var(--ui-text-secondary));
+  font-style: italic;
+}
+
 .looma-editor .ProseMirror hr {
   margin: var(--ui-space-6) 0;
   border: 0;

package/vue/editor/LoomaEditor.d.ts

@@ -1,7 +1,7 @@
 import "./looma-editor.css";
 import type { AnyExtension, Editor, JSONContent } from "@tiptap/core";
 import { type PropType, type VNode } from "vue";
-import { type LoomaMentionItem, type LoomaMentionProvider } from "@threadlabs/looma/editor";
+import { type LoomaMentionItem, type LoomaMentionProvider, type LoomaCodeLanguages } from "@threadlabs/looma/editor";
 import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "./image-delivery.js";
 /**
  * Host upload result normalized into the editor's durable image descriptor.
@@ -70,6 +70,11 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<AnyExtension[]>;
         default: () => never[];
     };
+    /** Code block grammars to register when this editor is created. */
+    codeLanguages: {
+        type: PropType<LoomaCodeLanguages>;
+        default: () => {};
+    };
     mentionItems: {
         type: PropType<LoomaMentionItem[]>;
         default: () => never[];
@@ -144,6 +149,11 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<AnyExtension[]>;
         default: () => never[];
     };
+    /** Code block grammars to register when this editor is created. */
+    codeLanguages: {
+        type: PropType<LoomaCodeLanguages>;
+        default: () => {};
+    };
     mentionItems: {
         type: PropType<LoomaMentionItem[]>;
         default: () => never[];
@@ -187,6 +197,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     label: string;
     placeholder: string;
     disableHighlight: boolean;
+    codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>>;
     modelValue: JSONContent;
     editable: boolean;
     extensions: AnyExtension[];

package/vue/editor/index.js

@@ -299,6 +299,11 @@ var LoomaEditor = defineComponent({
 			type: Array,
 			default: () => []
 		},
+		/** Code block grammars to register when this editor is created. */
+		codeLanguages: {
+			type: Object,
+			default: () => ({})
+		},
 		mentionItems: {
 			type: Array,
 			default: () => []
@@ -512,7 +517,8 @@ var LoomaEditor = defineComponent({
 				...getDefaultEditorExtensions({
 					placeholder: props.placeholder,
 					mention: mentionExtension ?? false,
-					disableHighlight: props.disableHighlight
+					disableHighlight: props.disableHighlight,
+					codeLanguages: props.codeLanguages
 				}),
 				imageDelivery.extension,
 				slashExtension,