-
-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathpastehandler.ts
More file actions
174 lines (151 loc) · 3.92 KB
/
Copy pathpastehandler.ts
File metadata and controls
174 lines (151 loc) · 3.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
import { htmlToBlocks } from "@portabletext/block-tools";
import { micromark } from "micromark";
import { gfmTable, gfmTableHtml } from "micromark-extension-gfm-table";
interface Input {
event: ClipboardEvent;
schemaTypes: SchemaTypes;
path: Array<any>;
}
interface SchemaTypes {
blockObjects: Array<{ name: string }>;
portableText: any;
}
interface Block {
_type: "code";
code: string;
language: string;
}
interface InsertPatch {
insert: ReturnType<typeof htmlToBlocks>;
path: Array<any>;
}
export async function handlePaste(
input: Input,
): Promise<InsertPatch | undefined> {
const { event, schemaTypes, path } = input;
const text = event.clipboardData?.getData("text/plain");
const json = event.clipboardData?.getData("application/json");
if (text && !json) {
const html = micromark(text, {
extensions: [gfmTable()],
htmlExtensions: [gfmTableHtml()],
});
return html
? convertHtmlToSanityPortableTextPatch(html, schemaTypes, path)
: undefined;
}
return undefined;
}
function convertHtmlToSanityPortableTextPatch(
html: string,
schemaTypes: SchemaTypes,
path: Array<any>,
): InsertPatch | undefined {
if (!html) return undefined;
const blocks = htmlToBlocks(html, schemaTypes.portableText, {
rules: [
// @ts-ignore
{ deserialize: deserializeCodeBlockElement },
// @ts-ignore
{ deserialize: deserializeTableElement },
],
});
return blocks ? { insert: blocks, path } : undefined;
}
function isTableTypeAvailable(schemaTypes: SchemaTypes): boolean {
const hasTableType = schemaTypes.blockObjects.some(
(type) => type.name === "table",
);
if (!hasTableType) {
console.warn(
"A table type is not defined in the schema. This is required to paste tables.",
);
}
return hasTableType;
}
function isCodeTypeAvailable(schemaTypes: SchemaTypes): boolean {
const hasCodeType = schemaTypes.blockObjects.some(
(type) => type.name === "code",
);
if (!hasCodeType) {
console.warn(
'Run `sanity install @sanity/code-input` and add `type: "code"` to your schema.',
);
}
return hasCodeType;
}
function deserializeCodeBlockElement(
el: Element,
next: any,
block: (block: any) => any,
): Block | undefined {
if (!isPreformattedText(el)) return undefined;
const codeElement = el.children[0];
const childNodes = getCodeChildNodes(el, codeElement as Element);
const codeText = extractTextFromNodes(childNodes);
const language = mapLanguageAliasToActualLanguage(
getLanguageAlias(codeElement as Element),
);
return block({
_type: "code",
code: codeText,
language,
});
}
function isPreformattedText(el: Element): boolean {
return el && el.children && el.tagName && el.tagName.toLowerCase() === "pre"
? true
: false;
}
function getCodeChildNodes(
el: Element,
codeElement: Element,
): NodeListOf<ChildNode> {
return codeElement && codeElement.tagName.toLowerCase() === "code"
? codeElement.childNodes
: el.childNodes;
}
function extractTextFromNodes(childNodes: NodeListOf<ChildNode>): string {
return Array.from(childNodes)
.map((node) => node.textContent || "")
.join("");
}
function getLanguageAlias(codeElement: Element): string {
return codeElement.className.replace("language-", "");
}
function mapLanguageAliasToActualLanguage(languageAlias: string): string {
const languageMapping = {
js: "javascript",
ts: "typescript",
};
return (
languageMapping[languageAlias as keyof typeof languageMapping] ||
(languageAlias as string)
);
}
function deserializeTableElement(
el: Element,
next: any,
block: (block: any) => any,
) {
if (el?.tagName?.toLowerCase() !== "table") {
return undefined;
}
const rows = Array.from(el.querySelectorAll("tr")).map((tr) => {
const cells = Array.from(tr.querySelectorAll("th, td")).map((td) => {
const link = td.querySelector("a");
if (link) {
return `[${link.textContent}](${link.href})`;
}
return td.textContent;
});
return {
_type: "row",
cells,
};
});
return block({
_type: "table",
rows,
});
}