feat: replace markdown-style layout with div and css structure. #97

Author: jaywcjlove

packages/action/dist/action.js

@@ -11,8 +11,8 @@ import { githubCorners } from './nodes/github-corners.js';
 import { githubCornersFork } from './nodes/github-corners-fork.js';
 import { octiconLink } from './nodes/octiconLink.js';
 import { imgBase64 as toBase64 } from './nodes/imgBase64.js';
-import { markdownStyle } from './nodes/markdown-style.js';
-import { copyElement, copyStyle, copyScript } from './nodes/copy.js';
+import { markdownStyle, mdStyle } from './nodes/markdown-style.js';
+import { copyElement, copyScript } from './nodes/copy.js';
 import { darkMode } from './nodes/dark-mode.js';
 import { MDToHTMLOptions } from './index.js';
 
@@ -74,10 +74,6 @@ export function create(options: MDToHTMLOptions = {}) {
           child.children = [octiconLink()];
         }
       }
-      if (node.type == 'element' && node.tagName === 'markdown-style') {
-        node.children.push(copyStyle());
-        node.children.push(copyScript());
-      }
       if (node.type == 'element' && node.tagName === 'pre') {
         const code = getCodeString(node.children);
         node.children.push(copyElement(code));
@@ -106,6 +102,18 @@ export function create(options: MDToHTMLOptions = {}) {
       documentOptions.style = Array.isArray(document.style) ? document.style : [document.style];
     }
 
+    if (Array.isArray(documentOptions.style)) {
+      documentOptions.style.push(mdStyle);
+    } else if (typeof documentOptions.style === 'string') {
+      documentOptions.style = [documentOptions.style, mdStyle];
+    }
+    documentOptions.script = documentOptions.script || [];
+    if (Array.isArray(documentOptions.script)) {
+      documentOptions.script.push(copyScript);
+    } else if (typeof documentOptions.script === 'string') {
+      documentOptions.script = [documentOptions.script, copyScript];
+    }
+
     mdOptions.rehypePlugins.unshift([rehypeDocument, documentOptions]);
   }
 

packages/cli/src/create.ts

@@ -1,61 +1,6 @@
 import { Element } from 'hast';
 
-const style = `markdown-style pre .copied {
-  display: flex;
-  position: absolute;
-  cursor: pointer;
-  color: #a5afbb;
-  top: 6px;
-  right: 6px;
-  border-radius: 5px;
-  background: #82828226;
-  padding: 6px;
-  font-size: 12px;
-  transition: all .3s;
-}
-markdown-style pre .copied:not(.active) {
-  visibility: hidden;
-}
-markdown-style pre:hover .copied {
-  visibility: visible;
-}
-markdown-style pre:hover .copied:hover {
-  background: #4caf50;
-  color: #fff;
-}
-markdown-style pre:hover .copied:active,
-markdown-style pre .copied.active {
-  background: #2e9b33;
-  color: #fff;
-}
-markdown-style pre .copied .octicon-copy {
-  display: block;
-}
-markdown-style pre .copied .octicon-check {
-  display: none;
-}
-markdown-style pre .active .octicon-copy {
-  display: none;
-}
-markdown-style pre .active .octicon-check {
-  display: block;
-}`;
-
-export function copyStyle(): Element {
-  return {
-    type: 'element',
-    tagName: 'style',
-    properties: {},
-    children: [
-      {
-        type: 'text',
-        value: style
-      }
-    ]
-  }
-}
-
-const script = `/*! @uiw/copy-to-clipboard v1.0.12 | MIT (c) 2021 Kenny Wang | https://github.com/uiwjs/copy-to-clipboard.git */
+export const copyScript = `/*! @uiw/copy-to-clipboard v1.0.12 | MIT (c) 2021 Kenny Wang | https://github.com/uiwjs/copy-to-clipboard.git */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).copyTextToClipboard=t()}(this,(function(){"use strict";return function(e,t){const o=document.createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style={position:"absolute",left:"-9999px"},document.body.appendChild(o);const n=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);o.select();let c=!1;try{c=!!document.execCommand("copy")}catch(e){c=!1}document.body.removeChild(o),n&&document.getSelection&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(n)),t&&t(c)}}));
 
 function copied(target, str) {
@@ -67,20 +12,6 @@ function copied(target, str) {
   });
 }`;
 
-export function copyScript(): Element {
-  return {
-    type: 'element',
-    tagName: 'script',
-    properties: {},
-    children: [
-      {
-        type: 'text',
-        value: script
-      }
-    ]
-  }
-}
-
 export function copyElement(str: string = ''): Element {
   return {
     type: 'element',

packages/cli/src/nodes/copy.ts

@@ -72,7 +72,6 @@ it('options.document.js=[] test case', async () => {
 
 it('options=undefined test case', async () => {
   expect(create({ 'dark-mode': false }).indexOf('<dark-mode permanent') > -1).toBeFalsy();
-  expect(create().indexOf('</markdown-style>') > -1).toBeTruthy();
 });
 
 it('options.document=undefined test case', async () => {
@@ -88,7 +87,6 @@ it('github-corners test case', async () => {
   });
   expect(html.indexOf('<dark-mode style=') > 0).toBeTruthy();
   expect(html.indexOf('<github-corners target="__blank"') > 0).toBeTruthy();
-  expect(html.indexOf('<markdown-style') > 0).toBeTruthy();
   expect(html.indexOf('max-width: 960px; margin: 0 auto 60px auto; padding: 8px') > 0).toBeTruthy();
   expect(html.indexOf('class="markdown-style"') > 0).toBeTruthy();
 

packages/cli/src/nodes/markdown-style.ts

@@ -20,14 +20,13 @@ it('copyElement test case', async () => {
 });
 
 it('markdownStyle test case', async () => {
-  console.log(`markdownStyle([], 'light')[1].properties::::`, markdownStyle([], 'light')[1].properties)
-  expect(markdownStyle([], undefined).length).toEqual(2);
-  expect(markdownStyle([], 'light')[1].properties).toEqual(expect.objectContaining({
+  expect(markdownStyle([], undefined).length).toEqual(1);
+  expect(markdownStyle([], 'light')[0].properties).toEqual(expect.objectContaining({
     "className": "markdown-style",
     "mode": "light",
     "style": "max-width: 960px; margin: 0 auto 60px auto; padding: 8px;",
   }));
-  expect(markdownStyle([], 'dark')[1].properties).toEqual(expect.objectContaining({
+  expect(markdownStyle([], 'dark')[0].properties).toEqual(expect.objectContaining({
     "className": "markdown-style",
     "mode": "dark",
     "style": "max-width: 960px; margin: 0 auto 60px auto; padding: 8px;",