encode data-uuid passed to CKEditor (#1063)

In #1036 we began encoding the data-uuid argument for < resource_link > shortcodes. The encoding / decoding worked fine for converting between HTML and Markdown.

But in that PR I forgot to encode the data we passed to CKEditor when creating new links.

static/js/components/widgets/MarkdownEditor.test.tsx

@@ -1,13 +1,15 @@
 import React from "react"
 import { shallow } from "enzyme"
 import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor"
+import { CKEditor } from "@ckeditor/ckeditor5-react"
 import sinon, { SinonSandbox } from "sinon"
 import { omit } from "ramda"
 
 import MarkdownEditor from "./MarkdownEditor"
 import {
   FullEditorConfig,
-  MinimalEditorConfig
+  MinimalEditorConfig,
+  insertResourceLink
 } from "../../lib/ckeditor/CKEditor"
 import {
   ADD_RESOURCE_EMBED,
@@ -16,6 +18,18 @@ import {
   RESOURCE_EMBED,
   RESOURCE_LINK
 } from "../../lib/ckeditor/plugins/constants"
+import ResourcePickerDialog from "../../components/widgets/ResourcePickerDialog"
+import { getMockEditor } from "../../test_util"
+
+jest.mock("../../lib/ckeditor/CKEditor", () => {
+  const originalModule = jest.requireActual("../../lib/ckeditor/CKEditor")
+
+  return {
+    __esModule:         true,
+    ...originalModule,
+    insertResourceLink: jest.fn()
+  }
+})
 
 jest.mock("@ckeditor/ckeditor5-react", () => ({
   CKEditor: () => <div />
@@ -63,6 +77,22 @@ describe("MarkdownEditor", () => {
     })
   })
 
+  it("should delegate to addResourceLink when inserting a link", async () => {
+    const wrapper = render({ link: ["page"] })
+    const editorComponent = wrapper.find<{ onReady:(e: unknown) => void }>(
+      CKEditor
+    )
+    const editor = getMockEditor()
+    editorComponent.prop("onReady")(editor)
+    const picker = wrapper.find(ResourcePickerDialog)
+    picker.prop("insertEmbed")("best-uuid-ever", "some title", "resourceLink")
+    expect(insertResourceLink).toHaveBeenCalledWith(
+      editor,
+      "best-uuid-ever",
+      "some title"
+    )
+  })
+
   it.each([
     { link: [], embed: [], shouldExist: false },
     { link: ["page"], embed: [], shouldExist: true },

static/js/components/widgets/MarkdownEditor.tsx

@@ -5,7 +5,8 @@ import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor"
 
 import {
   FullEditorConfig,
-  MinimalEditorConfig
+  MinimalEditorConfig,
+  insertResourceLink
 } from "../../lib/ckeditor/CKEditor"
 import EmbeddedResource from "./EmbeddedResource"
 import {
@@ -57,7 +58,7 @@ export default function MarkdownEditor(props: Props): JSX.Element {
           // we pass the title down because we want to set that as the
           // default text in the link, in the case where we're not adding
           // the link attribute to existing text.
-          editor.current.execute(ResourceCommandMap[variant], uuid, title)
+          insertResourceLink(editor.current, uuid, title)
         } else {
           editor.current.execute(ResourceCommandMap[variant], uuid)
         }

static/js/components/widgets/ResourcePickerDialog.test.tsx

@@ -117,7 +117,11 @@ describe("ResourcePickerDialog", () => {
   })
 
   it.each([
-    { mode: RESOURCE_LINK, attaching: "linking", acceptText: "Add link" },
+    {
+      mode:       RESOURCE_LINK,
+      attaching:  "linking",
+      acceptText: "Add link"
+    },
     {
       mode:       RESOURCE_EMBED,
       attaching:  "embedding",

static/js/lib/ckeditor/CKEditor.ts

@@ -15,12 +15,17 @@ import ParagraphPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraph"
 import TablePlugin from "@ckeditor/ckeditor5-table/src/table"
 import TableToolbarPlugin from "@ckeditor/ckeditor5-table/src/tabletoolbar"
 
+import { editor } from "@ckeditor/ckeditor5-core"
+
 import Markdown from "./plugins/Markdown"
 import ResourceEmbed from "./plugins/ResourceEmbed"
 import ResourcePicker from "./plugins/ResourcePicker"
 import { ADD_RESOURCE_EMBED, ADD_RESOURCE_LINK } from "./plugins/constants"
 import ResourceLink from "@mitodl/ckeditor5-resource-link/src/link"
-import ResourceLinkMarkdownSyntax from "./plugins/ResourceLinkMarkdownSyntax"
+import { RESOURCE_LINK_COMMAND } from "@mitodl/ckeditor5-resource-link/src/constants"
+import ResourceLinkMarkdownSyntax, {
+  encodeShortcodeArgs
+} from "./plugins/ResourceLinkMarkdownSyntax"
 import DisallowNestedTables from "./plugins/DisallowNestedTables"
 import TableMarkdownSyntax from "./plugins/TableMarkdownSyntax"
 import MarkdownListSyntax from "./plugins/MarkdownListSyntax"
@@ -111,3 +116,12 @@ export const MinimalEditorConfig = {
   },
   language: "en"
 }
+
+export const insertResourceLink = (
+  editor: editor.Editor,
+  uuid: string,
+  title: string
+) => {
+  const encoded = encodeShortcodeArgs(uuid)
+  editor.execute(RESOURCE_LINK_COMMAND, encoded, title)
+}

static/js/test_util.ts

@@ -48,3 +48,11 @@ export const twoBooleanTestMatrix = [
   [false, true],
   [false, false]
 ]
+
+export const getMockEditor = () => ({
+  editing: {
+    view: {
+      focus: jest.fn()
+    }
+  }
+})