1
0
silverbullet/web/cm_plugins/editor_paste.ts

234 lines
6.8 KiB
TypeScript
Raw Normal View History

2023-07-02 10:15:37 +00:00
import { EditorView, syntaxTree, ViewPlugin, ViewUpdate } from "../deps.ts";
import { maximumAttachmentSize } from "../../common/types.ts";
2023-07-14 12:22:26 +00:00
import { Editor } from "../editor.ts";
2022-04-11 18:34:09 +00:00
2022-11-09 10:38:12 +00:00
// We use turndown to convert HTML to Markdown
import TurndownService from "https://cdn.skypack.dev/turndown@7.1.1";
// With tables and task notation as well
import {
tables,
taskListItems,
} from "https://cdn.skypack.dev/@joplin/turndown-plugin-gfm@1.0.45";
import { safeRun } from "../../common/util.ts";
2023-07-02 10:15:37 +00:00
import { lezerToParseTree } from "../../common/markdown_parser/parse_tree.ts";
import {
addParentPointers,
findParentMatching,
nodeAtPos,
} from "../../plug-api/lib/tree.ts";
2023-07-07 11:09:44 +00:00
import { folderName, resolve } from "../../common/path.ts";
2022-11-09 10:38:12 +00:00
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(/<!--[\s\S]*?-->/g, "");
}
2022-04-11 18:34:09 +00:00
const urlRegexp =
/^https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
2022-03-30 13:16:22 +00:00
2022-05-16 13:09:36 +00:00
// Known iOS Safari paste issue (unrelated to this implementation): https://voxpelli.com/2015/03/ios-safari-url-copy-paste-bug/
2022-03-30 13:16:22 +00:00
export const pasteLinkExtension = ViewPlugin.fromClass(
class {
update(update: ViewUpdate): void {
update.transactions.forEach((tr) => {
if (tr.isUserEvent("input.paste")) {
2022-10-15 17:02:56 +00:00
const pastedText: string[] = [];
2022-03-30 13:16:22 +00:00
let from = 0;
let to = 0;
2022-10-15 17:02:56 +00:00
tr.changes.iterChanges((fromA, _toA, _fromB, toB, inserted) => {
2022-03-30 13:16:22 +00:00
pastedText.push(inserted.sliceString(0));
from = fromA;
to = toB;
});
2022-10-15 17:02:56 +00:00
const pastedString = pastedText.join("");
2022-03-30 13:16:22 +00:00
if (pastedString.match(urlRegexp)) {
2022-10-15 17:02:56 +00:00
const selection = update.startState.selection.main;
2022-03-30 13:16:22 +00:00
if (!selection.empty) {
setTimeout(() => {
update.view.dispatch({
changes: [
{
from: from,
to: to,
insert: `[${
update.startState.sliceDoc(
selection.from,
selection.to,
)
}](${pastedString})`,
2022-03-30 13:16:22 +00:00
},
],
});
});
}
}
}
});
}
},
2022-03-30 13:16:22 +00:00
);
export function attachmentExtension(editor: Editor) {
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 attachment wherever the cursor was last.
if (event.dataTransfer) {
2022-10-15 17:02:56 +00:00
const payload = [...event.dataTransfer.files];
if (!payload.length) {
return;
}
safeRun(async () => {
await processFileTransfer(payload);
});
}
},
paste: (event: ClipboardEvent) => {
2022-10-15 17:02:56 +00:00
const payload = [...event.clipboardData!.items];
2022-11-09 10:38:12 +00:00
const richText = event.clipboardData?.getData("text/html");
2023-07-02 10:15:37 +00:00
// Only do rich text paste if shift is NOT down
if (richText && !shiftDown) {
2023-07-02 10:15:37 +00:00
// Are we in a fencede 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) => t.type === "FencedCode",
);
if (fencedParentNode || currentNode.type === "FencedCode") {
console.log("Inside of fenced code block, not pasting rich text");
return false;
}
}
2022-11-09 10:38:12 +00:00
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[]) {
2022-10-15 17:02:56 +00:00
const data = await payload[0].arrayBuffer();
// data.byteLength > maximumAttachmentSize;
await saveFile(data!, payload[0].name, payload[0].type);
}
async function processItemTransfer(payload: DataTransferItem[]) {
2022-10-15 17:02:56 +00:00
const file = payload.find((item) => item.kind === "file");
if (!file) {
return false;
}
const fileType = file.type;
2022-10-15 17:02:56 +00:00
const ext = fileType.split("/")[1];
const fileName = new Date()
.toISOString()
.split(".")[0]
.replace("T", "_")
.replaceAll(":", "-");
2022-10-15 17:02:56 +00:00
const data = await file!.getAsFile()?.arrayBuffer();
await saveFile(data!, `${fileName}.${ext}`, fileType);
}
async function saveFile(
data: ArrayBuffer,
suggestedName: string,
mimeType: string,
) {
if (data!.byteLength > maximumAttachmentSize) {
editor.flashNotification(
`Attachment is too large, maximum is ${
maximumAttachmentSize / 1024 / 1024
}MB`,
"error",
);
return;
}
2023-07-07 11:09:44 +00:00
suggestedName = resolve(folderName(editor.currentPage!), suggestedName);
2023-01-18 15:46:24 +00:00
const finalFileName = await editor.prompt(
"File name for pasted attachment",
suggestedName,
);
if (!finalFileName) {
return;
}
await editor.space.writeAttachment(
finalFileName,
new Uint8Array(data),
);
let attachmentMarkdown = `[${finalFileName}](${encodeURI(finalFileName)})`;
if (mimeType.startsWith("image/")) {
attachmentMarkdown = `![](${encodeURI(finalFileName)})`;
}
editor.editorView!.dispatch({
changes: [
{
insert: attachmentMarkdown,
from: editor.editorView!.state.selection.main.from,
},
],
});
}
}