@cyfung1031/prism-code-editor 5.2.0-cdn-esm.0

package/dist/core.d.ts

@@ -0,0 +1,38 @@
+import { EditorOptions, PrismEditor, Language, EditorExtension } from './types.js';
+/**
+ * Creates a code editor using the specified container and options.
+ * @param container Element to append the editor to or a selector.
+ * This can also be a `ShadowRoot` or `DocumentFragment` for example.
+ * If omitted, you must manually append `editor.container` to the DOM.
+ * @param options Options the editor is initialized with.
+ * If omitted, the editor won't function until you call `editor.setOptions`.
+ * @param extensions Extensions added before the first render. You can still add extensions later.
+ * @returns Object to interact with the created editor.
+ */
+declare const createEditor: <T extends {} = {}>(container?: ParentNode | string | null, options?: (Partial<EditorOptions<T>> & Omit<T, keyof EditorOptions>) | null, ...extensions: EditorExtension<T>[]) => PrismEditor<T>;
+/**
+ * Almost identical to {@link createEditor}, but instead of appending the editor to your
+ * element, the editor replaces it.
+ *
+ * The `textContent` of the placeholder will be the code in the editor unless `options.value` is defined.
+ * @param placeholder Node or selector which will be replaced by the editor.
+ * @param options Options the editor is initialized with.
+ * @param extensions Extensions added before the first render. You can still add extensions later.
+ * @returns Object to interact with the created editor.
+ */
+declare const editorFromPlaceholder: <T extends {} = {}>(placeholder: string | ChildNode, options: Partial<EditorOptions<T>> & Omit<T, keyof EditorOptions>, ...extensions: EditorExtension<T>[]) => PrismEditor<T>;
+/** Equivalent to `document` in a browser setting, `null` otherwise. */
+declare const doc: Document | null;
+declare const createTemplate: <T extends Element = HTMLDivElement>(html: string, node?: Node) => () => T;
+declare const addListener: <T extends keyof HTMLElementEventMap>(target: HTMLElement, type: T, listener: (this: HTMLElement, ev: HTMLElementEventMap[T]) => any, options?: boolean | AddEventListenerOptions) => void;
+declare const getElement: <T extends Node>(el?: T | string | null) => HTMLElement | T | null | undefined;
+/**
+ * Counts number of lines in the string between `start` and `end`.
+ * If start and end are omitted, the whole string is searched.
+ */
+declare const numLines: (str: string, start?: number, end?: number) => number;
+/** Object storing all language specific behavior. */
+declare const languageMap: Record<string, Language>;
+declare const preventDefault: (e: Event) => void;
+declare const setSelectionChange: (f?: (force?: boolean) => void) => ((force?: boolean) => void) | undefined;
+export { createEditor, languageMap, numLines, createTemplate, getElement, preventDefault, editorFromPlaceholder, addListener, setSelectionChange, doc, };

package/dist/cursor-7DP0p42U.js

@@ -0,0 +1,80 @@
+import { r as createTemplate } from "./core-fngiDtt5.js";
+import { a as getLineBefore, b as scrollToEl, g as getLineEnd, h as addTextareaListener, t as addOverlay, v as getPosition, x as updateNode } from "./utils-umP5W0OV.js";
+//#region src/extensions/cursor/position.ts
+var cursorTemplate = /* @__PURE__ */ createTemplate("<div style=position:absolute;top:0;opacity:0;padding-inline-end:inherit> <span><span></span> ");
+/**
+* Extension which can be used to calculate the position of the cursor and scroll it into view.
+* This is used by the {@link defaultCommands} extension to keep the cursor in view while typing.
+*
+* The extension can also be accessed from `editor.extensions.cursor` when added.
+*/
+var cursorPosition = () => {
+	let cEditor;
+	const cursorContainer = cursorTemplate();
+	const [before, span] = cursorContainer.childNodes;
+	const [cursor, after] = span.childNodes;
+	const update = () => {
+		const selection = cEditor.getSelection();
+		const value = cEditor.value;
+		const activeLine = cEditor.lines[cEditor.activeLine];
+		const position = selection[selection[2] < "f" ? 0 : 1];
+		updateNode(before, getLineBefore(value, position));
+		updateNode(after, value.slice(position, getLineEnd(value, position)) + "\n");
+		if (cursorContainer.parentNode != activeLine) activeLine.prepend(cursorContainer);
+	};
+	const scrollIntoView = () => {
+		update();
+		scrollToEl(cEditor, cursor);
+	};
+	const self = (editor) => {
+		cEditor = editor;
+		editor.extensions.cursor = self;
+		addTextareaListener(editor, "input", (e) => {
+			if (/history/.test(e.inputType)) scrollIntoView();
+		});
+	};
+	self.getPosition = () => {
+		update();
+		return getPosition(cEditor, cursor);
+	};
+	self.scrollIntoView = scrollIntoView;
+	self.element = cursor;
+	return self;
+};
+//#endregion
+//#region src/extensions/cursor/custom.ts
+var template = createTemplate("<div class=pce-cursor>");
+/**
+* Extension that overrides the browser's default cursor.
+*
+* Due to a known issue, it's **not recommended** to use this extension with `wordWrap`
+* enabled.
+*
+* Use the `--pce-cursor` CSS variable to change the cursor's color and the `.pce-cursor`
+* selector for other styling.
+*
+* Requires the {@link cursorPosition} extension and styling from
+* `prism-code-editor/cursor.css` to work.
+*/
+var customCursor = () => {
+	return (editor) => {
+		let cursor = template();
+		let textareaStyle = editor.textarea.style;
+		let toggle;
+		editor.on("selectionChange", () => {
+			const pos = editor.extensions.cursor?.getPosition();
+			if (pos) {
+				textareaStyle.zIndex = textareaStyle.caretColor = "auto";
+				cursor.style = `left:${pos.left}px;top:${pos.top}px;height:${pos.height}px;animation-name:pce-blink${toggle = +!toggle}`;
+			}
+		});
+		addTextareaListener(editor, "dragover", () => {
+			textareaStyle.caretColor = "";
+		});
+		addOverlay(editor, cursor);
+	};
+};
+//#endregion
+export { cursorPosition as n, customCursor as t };
+
+//# sourceMappingURL=cursor-7DP0p42U.js.map

package/dist/cursor-7DP0p42U.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-7DP0p42U.js","names":[],"sources":["../src/extensions/cursor/position.ts","../src/extensions/cursor/custom.ts"],"sourcesContent":["import { BasicExtension, PrismEditor } from \"../../index.js\"\nimport { createTemplate } from \"../../core.js\"\nimport { getLineBefore } from \"../../utils/index.js\"\nimport {\n\tgetLineEnd,\n\tscrollToEl,\n\taddTextareaListener,\n\tgetPosition,\n\tupdateNode,\n} from \"../../utils/local.js\"\nimport { defaultCommands } from \"../commands/index.js\"\n\n/** Postion of the cursor relative to the editor's overlays. */\nexport type CursorPosition = {\n\ttop: number\n\tbottom: number\n\tleft: number\n\tright: number\n\theight: number\n}\n\nexport interface Cursor extends BasicExtension {\n\t/** Gets the cursor position relative to the editor overlays. */\n\tgetPosition(): CursorPosition\n\t/** Scrolls the cursor into view. */\n\tscrollIntoView(): void\n\t/** The empty span element representing the cursor. */\n\telement: HTMLSpanElement\n}\n\nconst cursorTemplate = /* @__PURE__ */ createTemplate(\n\t\"<div style=position:absolute;top:0;opacity:0;padding-inline-end:inherit> <span><span></span> \",\n)\n\n/**\n * Extension which can be used to calculate the position of the cursor and scroll it into view.\n * This is used by the {@link defaultCommands} extension to keep the cursor in view while typing.\n *\n * The extension can also be accessed from `editor.extensions.cursor` when added.\n */\nexport const cursorPosition = () => {\n\tlet cEditor: PrismEditor\n\n\tconst cursorContainer = cursorTemplate()\n\tconst [before, span] = <[Text, HTMLSpanElement]>(<unknown>cursorContainer.childNodes)\n\tconst [cursor, after] = <[HTMLSpanElement, Text]>(<unknown>span.childNodes)\n\tconst update = () => {\n\t\tconst selection = cEditor.getSelection()\n\t\tconst value = cEditor.value\n\t\tconst activeLine = cEditor.lines[cEditor.activeLine]\n\t\tconst position = selection[selection[2] < \"f\" ? 0 : 1]\n\n\t\tupdateNode(before, getLineBefore(value, position))\n\t\tupdateNode(after, value.slice(position, getLineEnd(value, position)) + \"\\n\")\n\t\tif (cursorContainer.parentNode != activeLine) activeLine.prepend(cursorContainer)\n\t}\n\tconst scrollIntoView = () => {\n\t\tupdate()\n\t\tscrollToEl(cEditor, cursor)\n\t}\n\n\tconst self: Cursor = editor => {\n\t\tcEditor = editor\n\n\t\teditor.extensions.cursor = self\n\t\taddTextareaListener(editor, \"input\", e => {\n\t\t\tif (/history/.test((<InputEvent>e).inputType)) scrollIntoView()\n\t\t})\n\t}\n\n\tself.getPosition = () => {\n\t\tupdate()\n\t\treturn getPosition(cEditor, cursor)\n\t}\n\n\tself.scrollIntoView = scrollIntoView\n\tself.element = cursor\n\n\treturn self\n}\n","import { createTemplate } from \"../../core.js\"\nimport { BasicExtension } from \"../../types.js\"\nimport { addOverlay } from \"../../utils/index.js\"\nimport { addTextareaListener } from \"../../utils/local.js\"\nimport { cursorPosition } from \"./position.js\"\n\nconst template = createTemplate(\"<div class=pce-cursor>\")\n\n/**\n * Extension that overrides the browser's default cursor.\n *\n * Due to a known issue, it's **not recommended** to use this extension with `wordWrap`\n * enabled.\n *\n * Use the `--pce-cursor` CSS variable to change the cursor's color and the `.pce-cursor`\n * selector for other styling.\n *\n * Requires the {@link cursorPosition} extension and styling from\n * `prism-code-editor/cursor.css` to work.\n */\nconst customCursor = (): BasicExtension => {\n\treturn editor => {\n\t\tlet cursor = template()\n\t\tlet textareaStyle = editor.textarea.style\n\t\tlet toggle: number\n\n\t\teditor.on(\"selectionChange\", () => {\n\t\t\tconst pos = editor.extensions.cursor?.getPosition()\n\n\t\t\tif (pos) {\n\t\t\t\ttextareaStyle.zIndex = textareaStyle.caretColor = \"auto\"\n\t\t\t\tcursor.style = `left:${pos.left}px;top:${pos.top}px;height:${\n\t\t\t\t\tpos.height\n\t\t\t\t}px;animation-name:pce-blink${(toggle = +!toggle)}`\n\t\t\t}\n\t\t})\n\n\t\taddTextareaListener(editor, \"dragover\", () => {\n\t\t\ttextareaStyle.caretColor = \"\"\n\t\t})\n\n\t\taddOverlay(editor, cursor)\n\t}\n}\n\nexport { customCursor }\n"],"mappings":";;;AA8BA,IAAM,iBAAiC,+BACtC,+FACD;;;;;;;AAQA,IAAa,uBAAuB;CACnC,IAAI;CAEJ,MAAM,kBAAkB,eAAe;CACvC,MAAM,CAAC,QAAQ,QAA2C,gBAAgB;CAC1E,MAAM,CAAC,QAAQ,SAA4C,KAAK;CAChE,MAAM,eAAe;EACpB,MAAM,YAAY,QAAQ,aAAa;EACvC,MAAM,QAAQ,QAAQ;EACtB,MAAM,aAAa,QAAQ,MAAM,QAAQ;EACzC,MAAM,WAAW,UAAU,UAAU,KAAK,MAAM,IAAI;EAEpD,WAAW,QAAQ,cAAc,OAAO,QAAQ,CAAC;EACjD,WAAW,OAAO,MAAM,MAAM,UAAU,WAAW,OAAO,QAAQ,CAAC,IAAI,IAAI;EAC3E,IAAI,gBAAgB,cAAc,YAAY,WAAW,QAAQ,eAAe;CACjF;CACA,MAAM,uBAAuB;EAC5B,OAAO;EACP,WAAW,SAAS,MAAM;CAC3B;CAEA,MAAM,QAAe,WAAU;EAC9B,UAAU;EAEV,OAAO,WAAW,SAAS;EAC3B,oBAAoB,QAAQ,UAAS,MAAK;GACzC,IAAI,UAAU,KAAkB,EAAG,SAAS,GAAG,eAAe;EAC/D,CAAC;CACF;CAEA,KAAK,oBAAoB;EACxB,OAAO;EACP,OAAO,YAAY,SAAS,MAAM;CACnC;CAEA,KAAK,iBAAiB;CACtB,KAAK,UAAU;CAEf,OAAO;AACR;;;ACzEA,IAAM,WAAW,eAAe,wBAAwB;;;;;;;;;;;;;AAcxD,IAAM,qBAAqC;CAC1C,QAAO,WAAU;EAChB,IAAI,SAAS,SAAS;EACtB,IAAI,gBAAgB,OAAO,SAAS;EACpC,IAAI;EAEJ,OAAO,GAAG,yBAAyB;GAClC,MAAM,MAAM,OAAO,WAAW,QAAQ,YAAY;GAElD,IAAI,KAAK;IACR,cAAc,SAAS,cAAc,aAAa;IAClD,OAAO,QAAQ,QAAQ,IAAI,KAAK,SAAS,IAAI,IAAI,YAChD,IAAI,OACJ,6BAA8B,SAAS,CAAC,CAAC;GAC3C;EACD,CAAC;EAED,oBAAoB,QAAQ,kBAAkB;GAC7C,cAAc,aAAa;EAC5B,CAAC;EAED,WAAW,QAAQ,MAAM;CAC1B;AACD"}

package/dist/cursor.css

@@ -0,0 +1 @@
+div.pce-cursor{right:auto;bottom:auto;width:2px;z-index:1;animation:1.06s steps(1) infinite}.pce-focus .pce-cursor{background:var(--pce-cursor)}@keyframes pce-blink0{0%,29%{opacity:1}43%,86%{opacity:0}}@keyframes pce-blink1{0%,29%{opacity:1}43%,86%{opacity:0}}