@witchcraft/editor 0.0.1

package/src/runtime/pm/utils/nodesBetween.ts

@@ -0,0 +1,47 @@
+import type { Node } from "@tiptap/pm/model"
+import type { Selection } from "@tiptap/pm/state"
+
+import type { NodesBetweenFilter } from "../../types/index.js"
+
+/**
+ * A more intuitive nodesBetween wrapper. Goes only through the nodes inside or touching the selection.
+ *
+ * Does not go through wrapping parents (except the first by default) that start/end before/after the given positions like nodesBetween.
+ *
+ * This can be changed by using the `shift` option, or `fromShift` and `toShift`.
+ *
+ * For example, if the cursor is in the middle of some text, using `{shift: 0}`, you would only get the text node.
+ *
+ * - Te|xt
+ *
+ * To get whatever it's parent item is, we need `{shift: -1}` (the default, since this is the most common use case).
+ */
+export function nodesBetween(doc: Node,
+	{ $from, $to }: Pick<Selection, "$from" | "$to">,
+	filter: NodesBetweenFilter,
+	{
+		shift = -1,
+		fromShift,
+		toShift
+	}: {
+		shift?: number
+		fromShift?: number
+		toShift?: number
+	} = {}
+): void {
+	let shiftFrom = fromShift
+	let shiftTo = toShift
+	if (shift) {
+		shiftFrom = shift
+		shiftTo = shift
+	}
+	doc.nodesBetween($from.start(), $to.end(), (node, pos, ...args) => {
+		const isAfterStart = pos >= $from.start(shiftFrom) - 1
+		const isBeforeEnd = pos <= $to.end(shiftTo) + 1
+		if (isAfterStart && isBeforeEnd) {
+			const res = filter(node, pos, ...args)
+			return res
+		}
+		return undefined
+	})
+}

package/src/runtime/pm/utils/pointToPmPoint.ts

@@ -0,0 +1,5 @@
+import type { PmPoint, Point } from "../../types/index.js"
+
+export function pointToPmPoint(point: Point): PmPoint {
+	return { left: point.x, top: point.y }
+}

package/src/runtime/pm/utils/splitIntoChunks.ts

@@ -0,0 +1,68 @@
+import { last, type Mutable } from "@alanscodelog/utils"
+import type { Node, NodeType } from "@tiptap/pm/model"
+import type { Selection } from "@tiptap/pm/state"
+
+import { nodesBetween } from "./nodesBetween.js"
+
+/**
+ * When we have a selection like so:
+ * ```
+ * - A1
+ * 	- B|1
+ * - A|2
+ * 	- B2
+ * ```
+ *
+ * We can't lift/sink the range because they're in different depths.
+ *
+ * This will split a selection into a list of {$from, $to} that can be lifted/sunk, e.g. B1 and A2 (which includes it's children).
+ *
+ * If $from.depth > $to.depth like this, nothing is split (unless splitChildren is true) since sinking A1 implies sinking all it's children. The selection returned is adjusted though so $pos.node() is of the wanted node type.
+ *
+ * ```
+ * - A|1
+ * 	- B|1
+ * - A2
+ * ```
+ * `splitChildren` should be true when lifting a list, if we want the above to lift B1 if the selection touches it.
+ *
+ * The function returns a selection like object with just $from and $to. This is because we need something like a BlockSelection really (multiple node selection), but NodeSelection does not support this.
+ *
+ * {@link mapSelection} can be used to map the returned selection. This is necessary if changing the chunks as you go through them.
+ */
+export const splitIntoChunks = (
+	doc: Node,
+	itemType: NodeType,
+	selection: Pick<Selection, "$from" | "$to">,
+	{
+		splitChildren = false
+	}: {
+		splitChildren?: boolean
+	} = {}
+): Mutable<Pick<Selection, "$from" | "$to">>[] => {
+	const { $from, $to } = selection
+	const $newFrom = doc.resolve($from.before())
+	const $lastTo = doc.resolve($to.after())
+	const pairs: Mutable<Pick<Selection, "$from" | "$to">>[] = [{
+		$from: $newFrom,
+		$to: $lastTo
+	}]
+	let searchedDepth = 0
+	let $last = $from
+	nodesBetween(doc, { $from, $to }, (node, pos) => {
+		if (node?.type === itemType) {
+			const $pos = doc.resolve(pos + 1)
+			if ($pos.depth < $newFrom.depth - (searchedDepth * 2)) {
+				last(pairs).$to = $last
+				pairs.push({ $from: $pos, $to: $lastTo })
+				searchedDepth++
+			} else if (splitChildren && $pos.depth !== $newFrom.depth) {
+				pairs.push({ $from: $pos, $to: $lastTo })
+			}
+			$last = $pos
+			return splitChildren
+		}
+		return true
+	})
+	return pairs
+}

package/src/runtime/testDocuments.ts

@@ -0,0 +1,130 @@
+// this is just to get syntax highlighting, crop won't affect the output
+import { crop as html } from "@alanscodelog/utils/crop"
+
+export const someDoc = {
+	title: "Some Doc",
+	content: html`
+		<li blockid="some-sub-id"><p>A</p></li>
+		<li blockid="some-sub-id2"><p>B</p></li>
+	`,
+	embedder: html`
+		<li><div type="embeddedDoc" embeddocid="someDoc"></div></li>
+	`,
+	subEmbedders: [
+		html` <li><div type="embeddedDoc" embeddocid="someDoc" embedblockid="some-sub-id"></div></li> `,
+		html` <li><div type="embeddedDoc" embeddocid="someDoc" embedblockid="some-sub-id2"></div></li> `
+	]
+}
+
+export const someDoc2 = {
+	title: "Some Doc 2",
+	content: html`
+		<li blockid="some-sub-id"><p>C</p></li>
+	`,
+	embedder: html`
+		<li><div type="embeddedDoc" embeddocid="someDoc2"></div></li>
+	`,
+	subEmbedders: [html`
+		<li><div type="embeddedDoc" embeddocid="someDoc2" embedblockid="some-sub-id"></div></li>
+	`]
+}
+
+export const someDoc3 = {
+	title: "Some Doc 3",
+	content: html`
+		<li blockid="some-sub-id"><p>D</p></li>
+		<li blockid="some-sub-id2"><p>E</p></li>
+	`,
+	embedder: html`
+		<li><div type="embeddedDoc" embeddocid="someDoc3"></div></li>
+	`,
+	subEmbedders: [
+		html` <li><div type="embeddedDoc" embeddocid="someDoc3" embedblockid="some-sub-id"></div></li> `,
+		html` <li><div type="embeddedDoc" embeddocid="someDoc3" embedblockid="some-sub-id2"></div></li> `
+	]
+}
+
+export const contentSimpleTable = html`
+<li>
+	<table>
+		<thead>
+			<th>a</th>
+			<th>b</th>
+		</thead>
+		<tbody>
+		<tr>
+			<td>a2</td>
+			<td>b2</td>
+		</tr>
+		<tr>
+			<td>a3</td>
+			<td>b3</td>
+		</tr>
+		</tbody>
+	</table>
+</li>
+`
+
+export const contentParagraphs = html`
+<li><p>Paragraph</p></li>
+<li><p>Paragraph with<br/> line break.</p></li>
+`
+export const contentMarks = html`
+<li><p><mark data-color="yellow">Yellow</mark></p></li>
+<li><p><mark data-color="orange">Orange</mark></p></li>
+<li><p><mark data-color="red">Red</mark></p></li>
+<li><p><mark data-color="green">Green</mark></p></li>
+<li><p><mark data-color="blue">Blue</mark></p></li>
+<li><b>Bold</b></li>
+<li><i>Italic</i></li>
+<li><s>Strikethrough</s></li>
+<li><u>Underline</u></li>
+<li><sub>Subscript</sub></li>
+<li><sup>Superscript</sup></li>
+<li><code>Inline Code</code></li>
+<li><b> Bold <i> Italic <a href="https://www.google.com">Link</a></i></b></li>
+<li><b> Bold <i> Italic <a href="internal://some-id">Internal Link</a></i></b></li>
+`
+
+export const contentBlockTypes = html`
+<li><pre><code language="css">.code .block {
+	color: red;
+}</code></pre></li>
+<li><blockquote><p>Blockquote</p></blockquote></li>
+<li><h1>Heading 1</h1></li>
+<li><h2>Heading 2</h2></li>
+<li><h3>Heading 3</h3></li>
+<li><h4>Heading 4</h4></li>
+<li><h5>Heading 5</h5></li>
+<li><h6>Heading 6</h6></li>
+<li><p>Image</p></li>
+<!-- is removed-->
+<li><div type="fileLoader" file-name="some-file.png" file-loading="true" file-loading-id="some-id"></div> </li>
+<li><img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC"/></li>
+${contentSimpleTable}
+${someDoc.embedder}
+${someDoc.subEmbedders[0]}
+`
+export const contentAllNodeTypes = html`
+${contentParagraphs}
+${contentMarks}
+${contentBlockTypes}
+`
+export const root = {
+	title: "Root",
+	embedder: html`
+		<li><div embeddocid="root"></div></li>
+	`,
+	content: html`
+	<ul>
+		${contentAllNodeTypes}
+	<ul>
+`
+}
+
+export const testDocuments = {
+	root,
+	someDoc,
+	someDoc2,
+	someDoc3
+}

package/src/runtime/types/index.ts

@@ -0,0 +1,56 @@
+import type { Node } from "@tiptap/pm/model"
+
+export * from "../pm/features/Link/types.js"
+export * from "../pm/features/Base/types.js"
+export * from "../pm/features/Menus/types.js"
+export * from "../pm/features/Blocks/types.js"
+export * from "../pm/features/CommandsMenus/types.js"
+export * from "../pm/features/CodeBlock/types.js"
+export * from "../pm/features/FileLoader/types.js"
+export * from "../pm/features/DocumentApi/types.js"
+export * from "../pm/features/EmbeddedDocument/types.js"
+
+export type NodesBetweenFilter = (node: Node | null, start: number, parent: Node | null, index: number) => boolean
+
+export type PmPoint = { left: number, top: number }
+export type Point = { x: number, y: number }
+
+export type CssVariables = {
+	/** The space between the node type indicator and the node. */
+	pmNodeTypeMargin: string
+	pmUnfocusedSelectionColor: string
+	/**
+	 * The background color for the code blocks.
+	 * This has not effect unless you've injected the css. See {@link useHighlightJsTheme}.
+	 */
+	pmCodeBlockBgColor: string
+	pmMaxEmbedWidth: string
+	pmDragScrollMargin: string
+	// the following are not prefixed with pm since the drag handle itself is from the ui library
+	/** The space between the handle and the node type indicator or node. */
+	dragHandleMargin: string
+	/** The size of the draggable handle. */
+	dragHandleSize: string
+	dragHandleImage: string
+	dragHandleCollapseIndicatorImage: string
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type HTMLAttributesOptions = {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	HTMLAttributes: Record<string, any>
+}
+
+export type CommandAttributeOptions<T> = CommandNodeOptions & {
+	attributeKey: string
+	allowedValues: T[]
+}
+export type CommandNodeOptions = {
+	nodeType: string
+}
+export type CommandToggleNodesOptions = {
+	/** Like {@link toggleNodeTypeNames}, but for groups. */
+	toggleGroups?: string[]
+	/** A list of node types that can be converted to the wanted node type. */
+	toggleNodeTypeNames?: string[]
+}