開発に AI を小さく導入するコツをTextlint を Markdown エディタに導入して考えてみた

			
			editor.action((ctx) => {
  // 必要となる初期値を用意する
	const view = ctx.get(editorViewCtx)
  // ...

  // decorations を作成して、その中に装飾する位置、装飾内容を入れたい
	const decorations: Decoration[] = []

	// root から全ての Node を走査して処理を走らせる
	doc.descendants((node, position) => {
		if (!node.isText || !node.text) return

		// 現在の Node が含まれる行を特定する
		let currentLine: number = 0;

		messages
   		// Textlint のメッセージで現在の Node と行数が一致するものを見つける
			.filter((message) => message.line === currentLine)
			// 一致したメッセージとNode を利用して処理を開始する
			.forEach((message) => {
				/**
				 * Markdownの位置からテキストノード内の位置を計算する
				 */

　　　　　// Decorations に位置情報とメッセージを入れる
				decorations.push(
					Decoration.inline(
						position + adjustedColumn,
						position + adjustedColumn + 1,
						{
							class: cn('border-b', 'border-red-300'),
							title: message.message,
						},
					),
				)
			})
	})

  // View に作成した Decorations でイベントを発火する
	const decorationSet = DecorationSet.create(doc, decorations)
	view.dispatch(view.state.tr.setMeta(textlintPluginKey, decorationSet))
})

		

			
			npx textlint-script-compiler \\
  --output-dir ./public \\
  --metadataName '<editor>' \\
  --metadataNamespace '<http://localhost:3000/>' \\
  --metadataHomepage  '<http://localhost:3000/>'

		

			
			const worker = new Worker(textlintWorker)

worker.postMessage({
  command: 'lint',
  text: serializer(editorView.state.doc),
  ext: '.md',
})

		

			
			worker.onmessage = (event: TextLintMessageEvent) => {
  if (event.data.command === 'lint') {
    return
  }
  if (!event.data.result?.messages) {
    return
  }
  // do something ...
}

		

			
			import z from 'zod'

export const TextLintMessageEvent = z.union([
	z.object({
		data: z.object({ command: z.literal('lint'), metadata: z.unknown() }),
	}),
	z.object({
		data: z.object({
			command: z.literal('lint:result'),
			result: z.object({
				filePath: z.string(),
				messages: z.array(
					z.object({
						type: z.enum(['lint']),
						ruleId: z.string(),
						message: z.string(),
						severity: z.number(),
						column: z.number(),
						index: z.number(),
						line: z.number(),
						loc: z.object({
							end: z.object({ line: z.number(), column: z.number }),
							start: z.object({ line: z.number(), column: z.number }),
						}),
						range: z.array(z.number()),
					}),
				),
			}),
		}),
	}),
])
export type TextLintMessageEvent = z.infer<typeof TextLintMessageEvent>

		

			
			const textlintPluginKey = new PluginKey<DecorationSet>('textlint')

const textlintPlugin = $prose(() => {
	return new Plugin({
		key: textlintPluginKey,
		state: {
			init() {
				return DecorationSet.empty
			},
			apply(tr, decorationSet) {
				const newDecorationSet = tr.getMeta(textlintPluginKey)
				return newDecorationSet || decorationSet.map(tr.mapping, tr.doc)
			},
		},
		props: {
			decorations(state) {
				return textlintPluginKey.getState(state)
			},
		},
	})
})

		

			
			export const Editor = () => {
	const { get } = useEditor((root) => {
		return MilkdownEditor.make()
			.config((ctx) => {
				ctx.set(rootCtx, root)
				ctx.get(listenerCtx).updated((ctx) => {
					const editorView = ctx.get(editorViewCtx)
					const serializer = ctx.get(serializerCtx)
					worker.postMessage({
						command: 'lint',
						text: serializer(editorView.state.doc),
						ext: '.md',
					})
				})
			})
			.use(commonmark)
			.use(listener)
			.use(textlintPlugin)
	})

		

			
			export const Editor = () => {
	const { get } = useEditor((root) => {})

	worker.onmessage = (event: TextLintMessageEvent) => {
		const messages = event.data.result.messages
		const editor = get()

		editor.action((ctx) => {
			const view = ctx.get(editorViewCtx)
			const serializer = ctx.get(serializerCtx)

			const doc = view.state.doc
			const markdown = serializer(doc)
			const lines = markdown.split('\n')

			const decorations: Decoration[] = []
			doc.descendants((node, position) => {
				if (!node.isText || !node.text) return

				// 現在のノードが含まれる行を特定
				let currentLine = 0
				for (let i = 0; i < lines.length; i++) {
					if (lines[i].includes(node.text)) {
						currentLine = i + 1
						break
					}
				}

				messages
					.filter((message) => message.line === currentLine)
					.forEach((message) => {
						// Markdownの位置からテキストノード内の位置を計算
						const markdownLine = lines[currentLine - 1]
						const textInLine = node.text ?? ''
						const textStart = markdownLine.indexOf(textInLine)

						if (textStart !== -1 && message.column > textStart) {
							const adjustedColumn = message.column - textStart - 1
							if (adjustedColumn >= 0 && adjustedColumn < textInLine.length) {
								decorations.push(
									Decoration.inline(
										position + adjustedColumn,
										position + adjustedColumn + 1,
										{
											class: cn('border-b', 'border-red-300'),
											title: message.message,
										},
									),
								)
							}
						}
					})
			})

			const decorationSet = DecorationSet.create(doc, decorations)
			view.dispatch(view.state.tr.setMeta(textlintPluginKey, decorationSet))
		})
	}

	return <Milkdown />
}