/* eslint-disable no-await-in-loop */ /* eslint-disable no-use-before-define */ import { AssertionError } from 'assert'; import * as Color from 'color'; import { docs_v1 as docsV1 } from 'googleapis'; import { Fragment, Mark, Node, Schema } from 'prosemirror-model'; import { sinkListItem } from 'prosemirror-schema-list'; import { EditorState, TextSelection, Transaction } from 'prosemirror-state'; import { ClientUtils, DashColor } from '../ClientUtils'; import { Utils } from '../Utils'; import { DocServer } from '../client/DocServer'; import { Networking } from '../client/Network'; import { GoogleApiClientUtils } from '../client/apis/google_docs/GoogleApiClientUtils'; import { GooglePhotos } from '../client/apis/google_docs/GooglePhotosClientUtils'; import { Docs } from '../client/documents/Documents'; import { DocUtils } from '../client/documents/DocUtils'; import { FormattedTextBox } from '../client/views/nodes/formattedText/FormattedTextBox'; import { schema } from '../client/views/nodes/formattedText/schema_rts'; import { Doc, Opt } from './Doc'; import { Id } from './FieldSymbols'; import { RichTextField } from './RichTextField'; import { Cast, StrCast } from './Types'; export namespace RichTextUtils { const delimiter = '\n'; const joiner = ''; export const Initialize = (initial?: string) => { const content: object[] = []; const state = { doc: { type: 'doc', content, }, selection: { type: 'text', anchor: 0, head: 0, }, }; if (initial && initial.length) { content.push({ type: 'paragraph', content: { type: 'text', text: initial, }, }); state.selection.anchor = state.selection.head = initial.length + 1; } return JSON.stringify(state); }; export const Synthesize = (plainText: string, oldState?: RichTextField) => new RichTextField(ToProsemirrorState(plainText, oldState), plainText); export const ToPlainText = (state: EditorState) => { // Because we're working with plain text, just concatenate all paragraphs const { content } = state.doc; const paragraphs: Node[] = []; content.forEach(node => node.type.name === 'paragraph' && paragraphs.push(node)); // Functions to flatten ProseMirror paragraph objects (and their components) to plain text // Concatentate paragraphs and string the result together const textParagraphs: string[] = paragraphs.map(paragraph => { const text: string[] = []; paragraph.content.forEach(node => node.text && text.push(node.text)); return text.join(joiner) + delimiter; }); const plainText = textParagraphs.join(joiner); return plainText.substring(0, plainText.length - 1); }; export const ToProsemirrorState = (plainText: string, oldState?: RichTextField) => { // Remap the text, creating blocks split on newlines const elements = plainText.split(delimiter); // Google Docs adds in an extra carriage return automatically, so this counteracts it !elements[elements.length - 1].length && elements.pop(); // Preserve the current state, but re-write the content to be the blocks const parsed = JSON.parse(oldState ? oldState.Data : Initialize()); parsed.doc.content = elements.map(text => { const paragraph: object = { type: 'paragraph', content: text.length ? [{ type: 'text', marks: [], text }] : undefined, // An empty paragraph gets treated as a line break }; return paragraph; }); // If the new content is shorter than the previous content and selection is unchanged, may throw an out of bounds exception, so we reset it parsed.selection = { type: 'text', anchor: 1, head: 1 }; // Export the ProseMirror-compatible state object we've just built return JSON.stringify(parsed); }; export namespace GoogleDocs { export const Export = async (state: EditorState): Promise => { const nodes: (Node | null)[] = []; const text = ToPlainText(state); state.doc.content.forEach(node => { if (!node.childCount) { nodes.push(null); } else { node.content.forEach(child => nodes.push(child)); } }); const requests = await marksToStyle(nodes); return { text, requests }; }; interface ImageTemplate { width: number; title: string; url: string; agnostic: string; } const parseInlineObjects = async (document: docsV1.Schema$Document): Promise> => { const inlineObjectMap = new Map(); const { inlineObjects } = document; if (inlineObjects) { const objects = Object.keys(inlineObjects).map(objectId => inlineObjects[objectId]); const mediaItems: MediaItem[] = objects.map(object => { const embeddedObject = object.inlineObjectProperties!.embeddedObject!; return { baseUrl: embeddedObject.imageProperties!.contentUri! }; }); const uploads = await Networking.PostToServer('/googlePhotosMediaGet', { mediaItems }); if (uploads.length !== mediaItems.length) { throw new AssertionError({ expected: mediaItems.length, actual: uploads.length, message: 'Error with internally uploading inlineObjects!' }); } for (let i = 0; i < objects.length; i++) { const object = objects[i]; const { accessPaths } = uploads[i]; const { agnostic, _m } = accessPaths; const embeddedObject = object.inlineObjectProperties!.embeddedObject!; const size = embeddedObject.size!; const width = size.width!.magnitude!; inlineObjectMap.set(object.objectId!, { title: embeddedObject.title || `Imported Image from ${document.title}`, width, url: ClientUtils.prepend(_m.client), agnostic: ClientUtils.prepend(agnostic.client), }); } } return inlineObjectMap; }; type BulletPosition = { value: number; sinks: number }; interface MediaItem { baseUrl: string; } export const Import = async (documentId: GoogleApiClientUtils.Docs.DocumentId, textNote: Doc): Promise> => { const document = await GoogleApiClientUtils.Docs.retrieve({ documentId }); if (!document) { return undefined; } const inlineObjectMap = await parseInlineObjects(document); const title = document.title!; const { text, paragraphs } = GoogleApiClientUtils.Docs.Utils.extractText(document); let state = EditorState.create(FormattedTextBox.MakeConfig()); const structured = parseLists(paragraphs); let position = 3; const lists: ListGroup[] = []; const indentMap = new Map(); let globalOffset = 0; const nodes: Node[] = []; for (const element of structured) { if (Array.isArray(element)) { lists.push(element); const positions: BulletPosition[] = []; // eslint-disable-next-line no-loop-func const items = element.map(paragraph => { const item = listItem(state.schema, paragraph.contents); const sinks = paragraph.bullet!; positions.push({ value: position + globalOffset, sinks, }); position += item.nodeSize; globalOffset += 2 * sinks; return item; }); indentMap.set(element, positions); nodes.push(list(state.schema, items)); } else if (element.contents.some(child => 'inlineObjectId' in child)) { const group = element.contents; // eslint-disable-next-line no-loop-func group.forEach((child, i) => { let node: Opt; if ('inlineObjectId' in child) { node = imageNode(state.schema, inlineObjectMap.get(child.inlineObjectId!)!, textNote); } else if ('content' in child && (i !== group.length - 1 || child.content!.removeTrailingNewlines().length)) { node = paragraphNode(state.schema, [child]); } if (node) { position += node.nodeSize; nodes.push(node); } }); } else { const paragraph = paragraphNode(state.schema, element.contents); nodes.push(paragraph); position += paragraph.nodeSize; } } state = state.apply(state.tr.replaceWith(0, 2, nodes)); const sink = sinkListItem(state.schema.nodes.list_item); const dispatcher = (tr: Transaction) => { state = state.apply(tr); }; lists.forEach(list => { indentMap.get(list)?.forEach(pos => { const resolved = state.doc.resolve(pos.value); state = state.apply(state.tr.setSelection(new TextSelection(resolved))); for (let i = 0; i < pos.sinks; i++) { sink(state, dispatcher); } }); }); return { title, text, state }; }; type Paragraph = GoogleApiClientUtils.Docs.Utils.DeconstructedParagraph; type ListGroup = Paragraph[]; type PreparedParagraphs = (ListGroup | Paragraph)[]; const parseLists = (paragraphs: ListGroup) => { const groups: PreparedParagraphs = []; let group: ListGroup = []; paragraphs.forEach(paragraph => { if (paragraph.bullet !== undefined) { group.push(paragraph); } else { if (group.length) { groups.push(group); group = []; } groups.push(paragraph); } }); group.length && groups.push(group); return groups; }; const listItem = (lschema: Schema, runs: docsV1.Schema$TextRun[]): Node => lschema.node('list_item', null, paragraphNode(lschema, runs)); const list = (lschema: Schema, items: Node[]): Node => lschema.node('ordered_list', { mapStyle: 'bullet' }, items); const paragraphNode = (lschema: Schema, runs: docsV1.Schema$TextRun[]): Node => { const children = runs .map(run => textNode(lschema, run)) .filter(child => child !== undefined) .map(child => child!); const fragment = children.length ? Fragment.from(children) : undefined; return lschema.node('paragraph', null, fragment); }; const imageNode = (lschema: Schema, image: ImageTemplate, textNote: Doc) => { const { url: src, width, agnostic } = image; let docId: string; const guid = Utils.GenerateDeterministicGuid(agnostic); const backingDocId = StrCast(textNote[guid]); if (!backingDocId) { const backingDoc = Docs.Create.ImageDocument(agnostic, { _width: 300, _height: 300 }); DocUtils.makeCustomViewClicked(backingDoc, Docs.Create.FreeformDocument); docId = backingDoc[Id]; textNote[guid] = docId; } else { docId = backingDocId; } return lschema.node('image', { src, agnostic, width, docId, float: null }); }; const textNode = (lschema: Schema, run: docsV1.Schema$TextRun) => { const text = run.content!.removeTrailingNewlines(); return text.length ? lschema.text(text, styleToMarks(lschema, run.textStyle)) : undefined; }; const StyleToMark = new Map([ ['bold', 'strong'], ['italic', 'em'], ['foregroundColor', 'pFontColor'], ['fontSize', 'pFontSize'], ]); const styleToMarks = (lschema: Schema, textStyle?: docsV1.Schema$TextStyle) => { if (!textStyle) { return undefined; } const marks: Mark[] = []; Object.keys(textStyle).forEach(key => { const targeted = key as keyof docsV1.Schema$TextStyle; const value = textStyle[targeted]; if (value) { const attributes: { [key: string]: number | string } = {}; let converted = StyleToMark.get(targeted) || targeted; const urlValue = value as docsV1.Schema$Link; urlValue.url && (attributes.href = urlValue.url); const colValue = value as docsV1.Schema$OptionalColor; const object = colValue.color?.rgbColor; if (object) { attributes.color = Color.rgb(['red', 'green', 'blue'].map(color => (object as { [key: string]: number })[color] * 255 || 0)).hex(); } const magValue = value as docsV1.Schema$Dimension; if (magValue.magnitude) { attributes.fontSize = magValue.magnitude; } const fontValue = value as docsV1.Schema$WeightedFontFamily; if (converted === 'weightedFontFamily') { converted = (fontValue.fontFamily && ImportFontFamilyMapping.get(fontValue.fontFamily)) || 'timesNewRoman'; } const mapped = lschema.marks[converted]; if (!mapped) { alert(`No mapping found for ${converted}!`); return; } const mark = lschema.mark(mapped, attributes); mark && marks.push(mark); } }); return marks; }; const MarkToStyle = new Map([ ['strong', 'bold'], ['em', 'italic'], ['pFontColor', 'foregroundColor'], ['pFontSize', 'fontSize'], ['timesNewRoman', 'weightedFontFamily'], ['georgia', 'weightedFontFamily'], ['comicSans', 'weightedFontFamily'], ['tahoma', 'weightedFontFamily'], ['impact', 'weightedFontFamily'], ]); const ExportFontFamilyMapping = new Map([ ['timesNewRoman', 'Times New Roman'], ['arial', 'Arial'], ['georgia', 'Georgia'], ['comicSans', 'Comic Sans MS'], ['tahoma', 'Tahoma'], ['impact', 'Impact'], ]); const ImportFontFamilyMapping = new Map([ ['Times New Roman', 'timesNewRoman'], ['Arial', 'arial'], ['Georgia', 'georgia'], ['Comic Sans MS', 'comicSans'], ['Tahoma', 'tahoma'], ['Impact', 'impact'], ]); const ignored = ['user_mark']; const marksToStyle = async (nodes: (Node | null)[]): Promise => { const requests: docsV1.Schema$Request[] = []; let position = 1; for (const node of nodes) { if (node === null) { position += 2; continue; } const { marks, attrs, nodeSize } = node; const textStyle: docsV1.Schema$TextStyle = {}; const information: LinkInformation = { startIndex: position, endIndex: position + nodeSize, textStyle, }; let mark: Mark; const markMap = BuildMarkMap(marks); for (const markName of Object.keys(schema.marks)) { if (ignored.includes(markName) || !(mark = markMap[markName])) { continue; } let converted = MarkToStyle.get(markName) || (markName as keyof docsV1.Schema$TextStyle); let value: unknown = true; if (!converted) { continue; } // eslint-disable-next-line @typescript-eslint/no-shadow const { attrs } = mark; switch (converted) { case 'link': { let url = attrs.allLinks.length ? attrs.allLinks[0].href : ''; const docDelimeter = '/doc/'; const alreadyShared = '?sharing=true'; if (new RegExp(window.location.origin + docDelimeter).test(url) && !url.endsWith(alreadyShared)) { const linkDoc = await DocServer.GetRefField(url.split(docDelimeter)[1]); if (linkDoc instanceof Doc) { let exported = (await Cast(linkDoc.link_anchor_2, Doc))!; if (!exported.customLayout) { exported = Doc.MakeEmbedding(exported); DocUtils.makeCustomViewClicked(exported, Docs.Create.FreeformDocument); linkDoc.link_anchor_2 = exported; } url = ClientUtils.shareUrl(exported[Id]); } } value = { url }; textStyle.foregroundColor = fromRgb.blue; textStyle.bold = true; } break; case 'fontSize': value = { magnitude: attrs.fontSize, unit: 'PT' }; break; case 'foregroundColor': value = fromHex(attrs.color); break; case 'weightedFontFamily': value = { fontFamily: ExportFontFamilyMapping.get(markName) }; break; default: } const matches = /p(\d+)/g.exec(markName); if (matches !== null) { converted = 'fontSize'; value = { magnitude: parseInt(matches[1].replace('px', '')), unit: 'PT' }; } textStyle[converted] = value as undefined; } if (Object.keys(textStyle).length) { requests.push(EncodeStyleUpdate(information)); } if (node.type.name === 'image') { const { width } = attrs; requests.push( await EncodeImage({ startIndex: position + nodeSize - 1, uri: attrs.agnostic, width: Number(typeof width === 'string' ? width.replace('px', '') : width), }) ); } position += nodeSize; } return requests; }; const BuildMarkMap = (marks: readonly Mark[]) => { const markMap: { [type: string]: Mark } = {}; marks.forEach(mark => { markMap[mark.type.name] = mark; }); return markMap; }; interface LinkInformation { startIndex: number; endIndex: number; textStyle: docsV1.Schema$TextStyle; } interface ImageInformation { startIndex: number; width: number; uri: string; } namespace fromRgb { export const convert = (red: number, green: number, blue: number): docsV1.Schema$OptionalColor => ({ color: { rgbColor: { red: red / 255, green: green / 255, blue: blue / 255, }, }, }); export const red = convert(255, 0, 0); export const green = convert(0, 255, 0); export const blue = convert(0, 0, 255); } const fromHex = (color: string): docsV1.Schema$OptionalColor => { const c = DashColor(color); return fromRgb.convert(c.red(), c.green(), c.blue()); }; const EncodeStyleUpdate = (information: LinkInformation): docsV1.Schema$Request => { const { startIndex, endIndex, textStyle } = information; return { updateTextStyle: { fields: '*', range: { startIndex, endIndex }, textStyle, } as docsV1.Schema$UpdateTextStyleRequest, }; }; const EncodeImage = async ({ uri, width, startIndex }: ImageInformation) => { if (!uri) { return {}; } const source = [Docs.Create.ImageDocument(uri)]; const baseUrls = await GooglePhotos.Transactions.UploadThenFetch(source); if (baseUrls) { return { insertInlineImage: { uri: baseUrls[0], objectSize: { width: { magnitude: width, unit: 'PT' } }, location: { index: startIndex }, }, }; } return {}; }; } }