@ember-eui/core 1.3.3 → 1.5.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ### Master
 
+### 1.5.0
+🚀 Enhancements
+`@ember-eui/validated-form`
+- Allow providing an markdown-editor componet for easier composability
+
+### 1.4.0
+🚀 Enhancements
+- Easier extending of processing plugins, add demo
+
+### 1.3.5
+🐛 Bug / Fixes
+- Urls for markdown editor icons
+
+### 1.3.4
+🐛 Bug / Fixes
+- Fix docs related to ember-svg-jar and netlify demo
+
+### 1.3.0 - 1.3.3
+🐛 Bug / Fixes
+- Ts bugs
+
 ### 1.3.0
 🚀 Enhancements
 `@ember-eui/core`

package/addon/components/eui-icon/index.ts

@@ -29,7 +29,7 @@ type IconColor = string | NamedColor;
 
 export type IconSize = keyof typeof sizeToClassNameMap;
 
-// const SVG_PREI : string | undefined = config['ember-eui'].svgPrefixPath || 'svg/assets';
+// const SVG_PREI : string | undefined = config['ember-eui'].svgPath || 'svg/assets';
 
 export type EuiIconArgs = CommonArgs & {
   /**

package/addon/components/eui-markdown-editor/index.hbs

@@ -56,6 +56,7 @@
         aria-labelledby={{@ariaLabelledBy}}
         aria-describedby={{@ariaDescribedBy}}
         {{on "input" (pick "target.value" @onChange)}}
+        {{validatable-control @isInvalid}}
         ...attributes
       />
     </EuiMarkdownEditorDropZone>

package/addon/components/eui-markdown-editor-footer/index.ts

@@ -10,11 +10,11 @@ export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkd
 
   get svgPath() {
     const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg';
+    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;
   }
 
   get markdownLogo() {
-    return `${this.svgPath}/markdown-logo`;
+    return `${this.svgPath}markdown-logo`;
   }
 }

package/addon/components/eui-markdown-editor-toolbar/index.ts

@@ -31,7 +31,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
 
   get svgPath() {
     const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg';
+    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;
   }
 
@@ -55,7 +55,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
         label: 'Task list',
         name: 'tl',
         useSvg: true,
-        iconType: `${this.svgPath}/markdown-checkmark`
+        iconType: `${this.svgPath}markdown-checkmark`
       }
     ];
   }

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

@@ -1,19 +1,18 @@
 import Component from '@glimmer/component';
-import type MarkdownActions from '../../utils/markdown/markdown-actions';
 import {
   defaultParsingPlugins,
   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';
+import type EuiMarkdownEditorComponent from '../eui-markdown-editor';
 
 export interface EuiMarkdownEditorToolbarArgs {
   parsingPluginList?: typeof defaultParsingPlugins;
   processingPluginList?: typeof defaultProcessingPlugins;
-  viewMode?: string;
-  markdownActions: MarkdownActions;
+  replaceNode?: EuiMarkdownEditorComponent['replaceNode'];
   value: string;
 }
 
@@ -28,7 +27,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.3",
+  "version": "1.5.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -77,9 +77,6 @@
     "ember-style-modifier": "^0.6.0",
     "ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag",
     "ember-truth-helpers": "^2.1.0",
-    "resolve": "^1.13.1"
-  },
-  "peerDependencies": {
     "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
@@ -90,6 +87,7 @@
     "remark-highlight.js": "^6.0.0",
     "remark-parse": "^8.0.3",
     "remark-rehype": "^8.0.0",
+    "resolve": "^1.13.1",
     "tabbable": "^5.1.5",
     "unified": "^9.2.0",
     "vfile": "^4.2.0"
@@ -133,24 +131,13 @@
     "eslint-plugin-ember": "^8.9.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "highlight.js": "^9.18.5",
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "qunit-dom": "^1.2.0",
-    "rehype-raw": "^5.0.0",
-    "rehype-stringify": "^8.0.0",
-    "remark-breaks": "^3.0.2",
-    "remark-emoji": "^2.1.0",
-    "remark-highlight.js": "^6.0.0",
-    "remark-parse": "^8.0.3",
-    "remark-rehype": "^8.0.0",
-    "tabbable": "^5.1.5",
-    "typescript": "^4.0.3",
-    "unified": "^9.2.0",
-    "vfile": "^4.2.0"
+    "typescript": "^4.0.3"
   },
   "publishConfig": {
     "access": "public"
@@ -167,5 +154,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "dd9fe0c7f4587eb88bdf6191ff445e78c7d221ec"
+  "gitHead": "51aac7b1e346dcd59cf60693be8df778c9020237"
 }