@discoveryjs/discovery - npm Package Compare versions

Comparing version 1.0.0-beta.74 to 1.0.0-beta.75

package.json

 {
     "name": "@discoveryjs/discovery",
-    "version": "1.0.0-beta.74",
+    "version": "1.0.0-beta.75",
     "description": "Frontend framework for rapid data (JSON) analysis, shareable serverless reports and dashboards",
@@ -38,6 +38,6 @@ "author": "Roman Dvornov <[e-mail]> (https://github.com/lahmatiy)",
         "jora": "1.0.0-beta.7",
-        "marked": "^4.0.18"
+        "marked": "^4.3.0"
     },
     "devDependencies": {
-        "@discoveryjs/cli": "^2.5.0",
+        "@discoveryjs/cli": "^2.5.1",
         "cypress": "^9.5.4",
@@ -44,0 +44,0 @@ "esbuild": "~0.14.49",

src/extensions/upload.js

@@ -14,3 +14,3 @@ import { createElement } from '../core/utils/dom.js';
             ? String(options.accept)
-            : 'application/json,.json';
+            : 'application/json,application/jsonxl,.json,.jsonxl';
         const dragdrop = Boolean(options.dragdrop || options.dragdrop === undefined);
@@ -17,0 +17,0 @@ const acceptTokens = accept.split(',');

src/version.js

@@ -1,1 +0,1 @@
-export const version = "1.0.0-beta.74";
+export const version = "1.0.0-beta.75";

src/views/markdown.js

@@ -99,8 +99,3 @@ /* eslint-env browser */
     const opts = {
-        discovery: host,
-        highlight(content, syntax, callback) {
-            const buffer = document.createDocumentFragment();
-            host.view.render(buffer, 'source', { syntax, content })
-                .then(() => callback(null, buffer.firstChild.outerHTML));
-        }
+        discovery: host
     };
@@ -133,3 +128,3 @@
     function render(el, config, data, context) {
-        const { source, anchors = true } = config;
+        const { source, anchors = true, codeActionButtons } = config;
         const interpolations = new Map();
@@ -144,2 +139,3 @@ let mdSource = typeof data === 'string' ? data : source || '';
             query = query.trim();
+
             if (!interpolations.has(query)) {
@@ -159,4 +155,7 @@ interpolations.set(query, interpolations.size);
                 (er, html) => {
-                    el.innerHTML = html.replace(/\n(<\/code>)/g, '$1'); // FIXME: marked adds extra newline before </code> for unknown reason
+                    const promises = [];
 
+                    el.innerHTML = html;
+
+                    // interpolations
                     if (interpolations.size > 0) {
@@ -176,3 +175,21 @@ const interpolationValues = new Array(interpolations.size);
 
-                    resolve();
+                    // highlight code with a source view
+                    for (const codeEl of [...el.querySelectorAll('pre > code')]) {
+                        const buffer = document.createDocumentFragment();
+                        const content = codeEl.textContent.replace(/\n$/, '');
+                        const syntax = (codeEl.className.match(/discovery-markdown-(\S+)/) || [])[1];
+
+                        promises.push(
+                            host.view.render(
+                                buffer,
+                                { view: 'source', actionButtons: codeActionButtons },
+                                { syntax, content },
+                                context
+                            ).then(() =>
+                                codeEl.replaceWith(buffer.firstChild)
+                            )
+                        );
+                    }
+
+                    Promise.all(promises).then(resolve);
                 }
@@ -179,0 +196,0 @@ );

src/views/markdown.usage.js

 export default {
     demo: {
         view: 'markdown',
-        source: '# Markdown example\n\n> NOTE: That\'s an experimental view based on [marked](https://github.com/markedjs/marked)\n\nMarkdown is good because:\n* You\'ll get **formatted** *text* with _no tags_\n* It\'s much simpler than `HTML`\n\n```html\n<b>bold</b><i>italic</i>\n```\n[Read more](https://guides.github.com/features/mastering-markdown/)'
+        source: '# Markdown example\n\n> NOTE: The `markdown` view is based on [marked](https://github.com/markedjs/marked) package\n\nMarkdown is good because:\n* You\'ll get **formatted** *text* with _no tags_\n* It\'s much simpler than `HTML`\n\n```html\n<b>bold</b><i>italic</i>\n```\n[Read more](https://guides.github.com/features/mastering-markdown/)'
     },
@@ -38,2 +38,3 @@ examples: [
             title: 'Disable anchors for headers',
+            highlightProps: ['anchors'],
             beforeDemo: 'Hover a header to see a chain icon on the left side of header when anchors are enabled:',
@@ -53,2 +54,18 @@ demo: [
         {
+            title: 'Additional action buttons for code blocks',
+            highlightProps: ['codeActionButtons'],
+            beforeDemo: 'md:Use `codeActionButtons` to add additional buttons to code blocks. The option is the same as `actionButtons` for `source` view.',
+            demo: {
+                view: 'markdown',
+                codeActionButtons: [
+                    {
+                        view: 'button',
+                        content: 'text:"Say \\"Hello world\\""',
+                        onClick: new Function('return () => alert("Hello world!")')()
+                    }
+                ],
+                source: '```js\nconsole.log("Hello world")\n```'
+            }
+        },
+        {
             title: 'Showcase',
@@ -55,0 +72,0 @@ demo: {

src/views/source.js

@@ -10,2 +10,4 @@ /* eslint-env browser */
 import usage from './source.usage.js';
+import { createElement } from '../core/utils/dom.js';
+import copyText from '../core/utils/copy-text.js';
 
@@ -224,8 +226,25 @@ const defaultMaxSourceSizeToHighlight = 250 * 1024;
                 : '';
+
+            // main content
             el.innerHTML =
                 lines +
-                '<div>' +
-                    hitext(decorators, 'html')(content) +
-                '</div>';
+                `<div class="source">${
+                    hitext(decorators, 'html')(content)
+                }</div>`;
 
+            // action buttons
+            const actionButtonsEl = createElement('div', 'action-buttons');
+
+            host.view.render(actionButtonsEl, [
+                config.actionButtons,
+                { view: 'button', className: 'copy', async onClick(btnEl) {
+                    clearTimeout(btnEl.copiedTimer);
+                    await copyText(content);
+                    btnEl.classList.add('copied');
+                    btnEl.copiedTimer = setTimeout(() => btnEl.classList.remove('copied'), 1250);
+                } }
+            ], data, context);
+            el.prepend(actionButtonsEl);
+
+            // tooltips
             for (const refEl of el.querySelectorAll(':scope [data-tooltip-id]')) {
@@ -232,0 +251,0 @@ const ref = refsTooltips.get(Number(refEl.dataset.tooltipId));

src/views/source.usage.js

 const codeExample = 'let name = "world";\n\nconsole.log(`Hello, ${name}!`);';
+const lineNum = new Function('return num => num + 5')();
 
@@ -26,15 +27,10 @@ export default {
         {
-            title: 'Highlight ranges',
+            title: 'Custom line numbers',
+            highlightProps: ['lineNum'],
             demo: {
                 view: 'source',
                 data: {
+                    content: codeExample,
                     syntax: 'js',
-                    content: codeExample,
-                    refs: [
-                        { range: [4, 8] },
-                        { range: [21, 28], type: 'link', href: '#example', tooltip: {
-                            position: 'trigger',
-                            content: ['text:"Link to "', 'text:href']
-                        } }
-                    ]
+                    lineNum
                 }
@@ -44,3 +40,5 @@ }
         {
-            title: 'Custom line numbers',
+            title: 'Hide line numbers',
+            highlightProps: ['lineNum'],
+            beforeDemo: ['md:"Pass falsy value to `lineNum` option to hide line numbers:"'],
             demo: {
@@ -51,3 +49,3 @@ view: 'source',
                     syntax: 'js',
-                    lineNum: idx => idx + 5
+                    lineNum: false
                 }
@@ -57,9 +55,34 @@ }
         {
-            title: 'Without line numbers',
+            title: 'Additional action buttons',
+            highlightProps: ['actionButtons'],
             demo: {
                 view: 'source',
+                actionButtons: [
+                    {
+                        view: 'button',
+                        content: 'text:"Say \\"Hello world\\""',
+                        onClick: new Function('return () => alert("Hello world!")')()
+                    }
+                ],
                 data: {
                     content: codeExample,
+                    syntax: 'js'
+                }
+            }
+        },
+        {
+            title: 'Highlight ranges',
+            highlightProps: ['refs'],
+            demo: {
+                view: 'source',
+                data: {
                     syntax: 'js',
-                    lineNum: false
+                    content: codeExample,
+                    refs: [
+                        { range: [4, 8] },
+                        { range: [21, 28], type: 'link', href: '#example', tooltip: {
+                            position: 'trigger',
+                            content: ['text:"Link to "', 'text:href']
+                        } }
+                    ]
                 }
@@ -69,4 +92,5 @@ }
         {
-            title: 'Max content size for highlight',
-            beforeDemo: ['md:"By default a syntax highlighing is not appling to a source which is bigger than 250Kb. Option `maxSourceSizeToHighlight` is using to change max size of source to be highlighted."'],
+            title: 'Max content size for syntax highlight',
+            highlightProps: ['maxSourceSizeToHighlight'],
+            beforeDemo: ['md:"By default a syntax highlighing is not appling to a source longer than 250Kb. Option `maxSourceSizeToHighlight` is using to change max size of source to be syntax highlighted."'],
             demo: {
@@ -73,0 +97,0 @@ view: 'source',

No alert changes

Improved metrics

Total package byte prevSize

1411270

increased by0.88%

Number of package files

268

increased by0.75%

Lines of code

19300

increased by0.81%

Dependency changes

• Updatedmarked@^4.3.0