@ember-eui/core 1.3.5 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ### Master
 
+### 1.4.0
+🚀 Enhancements
+- Easier extending of processing plugins, add demo
 ### 1.3.5
 🐛 Bug / Fixes
 - Urls for markdown editor icons

package/addon/components/eui-markdown-format/index.ts

@@ -5,7 +5,7 @@ import {
   defaultProcessingPlugins
 } from '../../utils/markdown/plugins/markdown-default-plugins';
 import { cached } from '@glimmer/tracking';
-import unified from 'unified';
+import unified, { Processor } from 'unified';
 import { toDOM } from '../../utils/markdown/plugins/to-dom';
 import type { RehypeNode } from '../../utils/markdown/markdown-types';
 
@@ -28,7 +28,17 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
 
   @cached
   get processor() {
-    return unified().use(this.parsingPluginList).use(this.processingPluginList);
+    const Compiler = (tree: any) => {
+      return tree;
+    };
+
+    function identityCompiler(this: Processor) {
+      this.Compiler = Compiler;
+    }
+    return unified()
+      .use(this.parsingPluginList)
+      .use(this.processingPluginList)
+      .use(identityCompiler);
   }
 
   @cached

package/addon/utils/markdown/plugins/markdown-default-plugins.ts

@@ -34,12 +34,6 @@ import {
   Settings
 } from 'unified';
 import remark2Rehype from 'remark-rehype';
-import { RehypeNode } from '../markdown-types';
-// import * as MarkdownTooltip from './markdown_tooltip';
-// import * as MarkdownCheckbox from './markdown_checkbox';
-// import { markdownLinkValidator } from './markdown_link_validator';
-// import { EuiLink } from '../../link';
-// import { EuiCodeBlock, EuiCode } from '../../code';
 import markdown from 'remark-parse';
 import emoji from 'remark-emoji';
 import all from 'mdast-util-to-hast/lib/all';
@@ -71,29 +65,12 @@ const unknownHandler: Handler = (h, node) => {
 
 export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
 
-class Compiler {
-  tree: RehypeNode | null = null;
-  constructor(tree: RehypeNode) {
-    this.tree = tree;
-  }
-
-  compile() {
-    return this.tree;
-  }
-}
-
-function compiler() {
-  //@ts-expect-error
-  this.Compiler = Compiler;
-}
-
 export const getDefaultEuiMarkdownProcessingPlugins = (): [
   [typeof remark2Rehype, Record<string, unknown>],
   ...PluggableList // any additional are generic
 ] => [
   [remark2Rehype, { allowDangerousHtml: true, unknownHandler }],
-  [MarkdownAddComponents, {}],
-  [compiler]
+  [MarkdownAddComponents, {}]
 ];
 
 export const defaultProcessingPlugins =

package/app/utils/markdown/plugins/markdown-add-components.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';

package/app/utils/markdown/plugins/markdown-default-plugins.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';

package/docs/editors/markdown-editor/base-editor-demo/demo1.md

@@ -8,6 +8,7 @@ order: 1
 <EuiMarkdownEditor
   @value={{this.value}}
   @onChange={{set this 'value'}}
+  @processingPluginList={{this.processingPlugins}}
 />
 ```
 
@@ -15,8 +16,31 @@ order: 1
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { visit } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';
+import { defaultProcessingPlugins } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';
+
+
+/*
+ Quick example how you can extend plugins, this plugin adds _blank to `a` elements
+*/
+function TargetBlankProcessingPlugin() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === 'element' && node.tagName === 'a') {
+				node.properties.target = '_blank';
+      }
+      return node;
+    });
+  };
+}
+
+const processingPlugins = [
+  ...defaultProcessingPlugins,
+  [TargetBlankProcessingPlugin, {}]
+];
 
 export default class EuiMarkdownEditor1 extends Component {
+  processingPlugins = processingPlugins;
   @tracked value = `## 👋 Hello there!
 
 I'm a **EuiMarkdownEditor** with:
@@ -81,6 +105,16 @@ func main() {
 
 \`\`\`
 
+----
+
+### You can also add tooltips if you want more explanation!
+
+!{tooltip[You can also add tooltips](Some helpful description)}
+
+### And links, check the demo source in how to tweak plugins!
+
+[Access Google!](https://google.com)
+
 `;
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -154,5 +154,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "93a5c9c6617c34c8851c48aba32380ad6ee9e945"
+  "gitHead": "205ab9480989c78d5516232395b233443735bbb6"
 }