markdown: add support for iframes, weird links

githubnext · Aug 22, 2022 · b069116 · b069116
1 parent 5467054
commit b069116
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/blocks/file-blocks/markdown-edit/copy-widget.tsx b/blocks/file-blocks/markdown-edit/copy-widget.tsx
@@ -199,7 +199,10 @@ export const copy = ({
             widgets.push(newDecoration.range(from, to));
           }
         } else if (type.name === "URL") {
-          const text = state.doc.sliceString(from, to);
+          let text = state.doc.sliceString(from, to);
+          const endOfLink = /\)/.exec(text);
+          to = endOfLink ? from + endOfLink.index + 1 : to;
+          text = state.doc.sliceString(from, to);
           const newDecoration = rawLinkDecoration(text);
           widgets.push(newDecoration.range(from, to));
         } else if (type.name === "Blockquote") {
@@ -233,8 +236,13 @@ export const copy = ({
             if (urlResult && urlResult.groups && urlResult.groups.url) {
               if (!text.includes("</a>")) {
                 // extend range to include closing tag
-                const endTagIndex = state.doc.lineAt(to).text.indexOf("</a>");
-                text = state.doc.sliceString(from, to + endTagIndex);
+                const endTagRegexRes = /<\/a>/.exec(state.doc.sliceString(to));
+                const endTagIndex = endTagRegexRes
+                  ? endTagRegexRes.index + endTagRegexRes[0].length
+                  : 0;
+
+                to = to + endTagIndex;
+                text = state.doc.sliceString(from, to);
                 const linkRegexHtml =
                   /<a.*?href="(?<url>.*?)".*?>(?<text>.*?)<\/a>/;
                 urlResult = linkRegexHtml.exec(text);
@@ -291,13 +299,14 @@ export const copy = ({
               "ul",
               "ol",
               "li",
+              "iframe",
             ].includes(tag)
           ) {
             const endOfTagRegex = new RegExp(`(</${tag}\s*>)|(\s*/>)`);
             let endOfTag = endOfTagRegex.exec(text);
             const tagsWithNoEndNeeded = ["br", "img"];
             if (!endOfTag) {
-              const subsequentText = state.doc.sliceString(to, to + 1000);
+              const subsequentText = state.doc.sliceString(to, to + 5000);
               const matches = endOfTagRegex.exec(subsequentText);
               const matchIndex = subsequentText.indexOf(matches?.[0]);
               if (matchIndex !== -1) {

diff --git a/blocks/file-blocks/markdown-edit/style.css b/blocks/file-blocks/markdown-edit/style.css
@@ -107,6 +107,9 @@ pre,
 .cm-line:not(.cm-code) + .cm-code {
   margin-top: 0 !important;
 }
+.cm-code + .cm-line:not(.cm-code) {
+  margin-top: 1em !important;
+}
 .cm-activeLine.cm-code {
   z-index: 10;
   background: #f6f8fa;
@@ -210,6 +213,7 @@ html body div.cm-editor .cm-line::selection {
 .cm-table {
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
     Liberation Mono, monospace;
+  white-space: nowrap;
 }
 .cm-table .cm-instruction {
   display: inline !important;