import { syntaxTree } from "@codemirror/language"; import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view"; import type { Client } from "../client.ts"; import { lezerToParseTree } from "../markdown_parser/parse_tree.ts"; import { addParentPointers, findParentMatching, nodeAtPos, } from "@silverbulletmd/silverbullet/lib/tree"; import { maximumDocumentSize } from "@silverbulletmd/silverbullet/constants"; import { safeRun } from "@silverbulletmd/silverbullet/lib/async"; import { resolveMarkdownLink } from "@silverbulletmd/silverbullet/lib/resolve"; import { localDateString } from "@silverbulletmd/silverbullet/lib/dates"; import type { UploadFile } from "@silverbulletmd/silverbullet/type/client"; import { isValidName, isValidPath } from "@silverbulletmd/silverbullet/lib/ref"; import TurndownService from "turndown"; // @ts-expect-error - No type definitions available for this package import { tables, taskListItems } from "@joplin/turndown-plugin-gfm"; const turndownService = new TurndownService({ hr: "---", codeBlockStyle: "fenced", headingStyle: "atx", emDelimiter: "*", bulletListMarker: "*", // Duh! strongDelimiter: "**", linkStyle: "inlined", }); turndownService.use(taskListItems); turndownService.use(tables); function striptHtmlComments(s: string): string { return s.replace(//g, ""); } function ensureValidFilenameWithExtension(filename: string): string { if (isValidPath(filename)) { return filename; } const match = filename.match(/\.([^.]+)$/); return `file.${match ? match[1] : "txt"}`; } async function doesFileExist( editor: Client, filePath: string, ): Promise { try { await editor.space.spacePrimitives.getFileMeta(filePath); return true; } catch { return false; } } const urlRegexp = /^https?:\/\/[-a-zA-Z0-9@:%._+~#=]{1,256}([-a-zA-Z0-9()@:%_+.~#?&//=]*)/; // Known iOS Safari paste issue (unrelated to this implementation): https://voxpelli.com/2015/03/ios-safari-url-copy-paste-bug/ export const pasteLinkExtension = ViewPlugin.fromClass( class { update(update: ViewUpdate): void { update.transactions.forEach((tr) => { if (tr.isUserEvent("input.paste")) { const pastedText: string[] = []; let from = 0; let to = 0; tr.changes.iterChanges((fromA, _toA, _fromB, toB, inserted) => { pastedText.push(inserted.sliceString(0)); from = fromA; to = toB; }); const pastedString = pastedText.join(""); if (pastedString.match(urlRegexp)) { const selection = update.startState.selection.main; if (!selection.empty) { setTimeout(() => { update.view.dispatch({ changes: [ { from: from, to: to, insert: `[${update.startState.sliceDoc( selection.from, selection.to, )}](${pastedString})`, }, ], }); }); } } } }); } }, ); export function documentExtension(editor: Client) { let shiftDown = false; return EditorView.domEventHandlers({ dragover: (event) => { event.preventDefault(); }, keydown: (event) => { if (event.key === "Shift") { shiftDown = true; } return false; }, keyup: (event) => { if (event.key === "Shift") { shiftDown = false; } return false; }, drop: (event: DragEvent) => { // TODO: This doesn't take into account the target cursor position, // it just drops the document wherever the cursor was last. if (event.dataTransfer) { const payload = [...event.dataTransfer.files]; if (!payload.length) { return; } safeRun(async () => { await processFileTransfer(payload); }); } }, paste: (event: ClipboardEvent) => { const payload = [...event.clipboardData!.items]; const richText = event.clipboardData?.getData("text/html"); // Only do rich text paste if shift is NOT down if (richText && !shiftDown) { // Are we in a fenced code block? const editorText = editor.editorView.state.sliceDoc(); const tree = lezerToParseTree( editorText, syntaxTree(editor.editorView.state).topNode, ); addParentPointers(tree); const currentNode = nodeAtPos( tree, editor.editorView.state.selection.main.from, ); if (currentNode) { const fencedParentNode = findParentMatching(currentNode, (t) => ["FrontMatter", "FencedCode"].includes(t.type!), ); if ( fencedParentNode || ["FrontMatter", "FencedCode"].includes(currentNode.type!) ) { console.log("Inside of fenced code block, not pasting rich text"); return false; } } event.preventDefault(); const markdown = striptHtmlComments( turndownService.turndown(richText), ).trim(); const view = editor.editorView; const selection = view.state.selection.main; view.dispatch({ changes: [ { from: selection.from, to: selection.to, insert: markdown, }, ], selection: { anchor: selection.from + markdown.length, }, scrollIntoView: true, }); return true; } if (!payload.length || payload.length === 0) { return false; } safeRun(async () => { await processItemTransfer(payload); }); }, }); async function processFileTransfer(payload: File[]) { const data = await payload[0].arrayBuffer(); // data.byteLength > maximumDocumentSize; const fileData: UploadFile = { name: payload[0].name, contentType: payload[0].type, content: new Uint8Array(data), }; await saveFile(fileData); } async function processItemTransfer(payload: DataTransferItem[]) { const file = payload.find((item) => item.kind === "file"); if (!file) { return false; } const fileType = file.type; const ext = fileType.split("/")[1]; const fileName = localDateString(new Date()) .split(".")[0] .replace("T", "_") .replaceAll(":", "-"); const data = await file!.getAsFile()?.arrayBuffer(); if (!data) { return false; } const fileData: UploadFile = { name: `${fileName}.${ext}`, contentType: fileType, content: new Uint8Array(data), }; await saveFile(fileData); } async function saveFile(file: UploadFile) { const maxSize = maximumDocumentSize; const invalidPathMessage = "Unable to upload file, invalid target filename or path"; if (file.content.length > maxSize * 1024 * 1024) { editor.ui.flashNotification( `Document is too large, maximum is ${maxSize}MiB`, "error", ); return; } let desiredFilePath = await editor.ui.prompt( "File name for pasted document", resolveMarkdownLink( client.currentPath(), ensureValidFilenameWithExtension(file.name), ), ); if (desiredFilePath === undefined) { // User hit cancel, so they know why we stopped and dont need an notification. return; } desiredFilePath = desiredFilePath.trim(); if (!isValidName(desiredFilePath)) { editor.ui.flashNotification(invalidPathMessage, "error"); return; } // Check the given desired file path wont clobber an existing file. If it // would, ask the user to confirm or provide another filename. Repeat this // check for every new filename they give. // Note: duplicate any modifications here to client/code_mirror/editor_paste.ts let finalFilePath = null; while (finalFilePath == null) { if (await doesFileExist(editor, desiredFilePath)) { let confirmedFilePath = await editor.ui.prompt( "A file with that name already exists, keep the same name to replace it, or rename your file", resolveMarkdownLink( client.currentPath(), ensureValidFilenameWithExtension(desiredFilePath), ), ); if (confirmedFilePath === undefined) { // Unlike the initial filename prompt, we're inside a workflow here // and should be explicit that the user action cancelled the whole // operation. editor.ui.flashNotification("Upload cancelled by user", "info"); return; } confirmedFilePath = confirmedFilePath.trim(); if (!isValidPath(confirmedFilePath)) { editor.ui.flashNotification(invalidPathMessage, "error"); return; } if (desiredFilePath === confirmedFilePath) { // if we got back the same path, we're replacing and should accept the given name finalFilePath = desiredFilePath; } else { // we got a new path, so we must repeat the check desiredFilePath = confirmedFilePath; confirmedFilePath = undefined; } } else { finalFilePath = desiredFilePath; } } await editor.space.writeDocument(finalFilePath, file.content); let documentMarkdown = `[[${finalFilePath}]]`; if (file.contentType.startsWith("image/")) { documentMarkdown = `!${documentMarkdown}`; } editor.editorView.dispatch({ changes: [ { insert: documentMarkdown, from: editor.editorView.state.selection.main.from, }, ], }); } }