Merge pull request #25 from atom-ide-community/common-ui

Author: aminya

.gitattributes

@@ -3,3 +3,4 @@
 # don't diff machine generated files
 dist/ -diff
 package-lock.json -diff
+pnpm-lock.yaml -diff

.prettierignore

@@ -4,6 +4,7 @@ package-lock.json
 pnpm-lock.yaml
 coverage
 build
-dist
-src-package
-modules
+
+commons-atom
+commons
+commons-ui

package.json

@@ -50,11 +50,18 @@
     "atom": ">=0.174.0 <2.0.0"
   },
   "dependencies": {
-    "atom-package-deps": "^6.0.0"
+    "atom-package-deps": "^6.0.0",
+    "dompurify": "^2.1.1",
+    "etch": "^0.14.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "@types/atom": "1.40.4",
     "@types/node": "^14.11.2",
+    "@types/dompurify": "^2.0.4",
+    "@types/react": "^16.9.51",
+    "@types/react-dom": "^16.9.8",
     "typescript": "^4.0.3",
     "tslib": "^2.0.1",
     "coffeescript": "^1.12.7",

pnpm-lock.yaml

@@ -0,0 +1,79 @@
+/**
+ * a reference to the DOMpurify function to make safe HTML strings
+ */
+import DOMPurify from "dompurify"
+import { MarkdownService } from "../../types-packages/main"
+
+/**
+ * an etch component that can host already prepared HTML text
+ */
+export class HTMLView {
+  rootElement: HTMLElement
+
+  /**
+   * creates the HTML view component and hands over the HTML to embedd
+   * @param {string} html the HTML string to embedd into the HTML view component
+   */
+  constructor({
+    html,
+    containerClassName,
+    contentClassName,
+  }: {
+    html: string
+    containerClassName: string
+    contentClassName: string
+  }) {
+    this.rootElement = document.createElement("div")
+    this.rootElement.className = containerClassName
+    this.rootElement.addEventListener("wheel", this.onMouseWheel, {
+      passive: true,
+    })
+    if (html) {
+      const innerHTML = DOMPurify.sanitize(html)
+      this.rootElement.innerHTML = `
+        <div className='${contentClassName}'>${innerHTML}</div>`
+    }
+  }
+
+  /**
+   * cleanup the HTML view component
+   */
+  destroy() {
+    this.rootElement.removeEventListener("wheel", this.onMouseWheel)
+  }
+
+  /**
+   * returns the root element of the HTML view component
+   * @return {HTMLElement} the root element wrapping the HTML content
+   */
+  get element(): HTMLElement {
+    return this.rootElement
+  }
+
+  /**
+   * handles the mouse wheel event to enable scrolling over long text
+   * @param  {WheelEvent} evt the mouse wheel event being triggered
+   */
+  onMouseWheel(evt: WheelEvent) {
+    evt.stopPropagation()
+  }
+}
+
+/**
+ * convert the markdown documentation to HTML
+ * @param markdownTexts the documentation text in markdown format to be converted
+ * @param grammarName  the default grammar used for embedded code samples
+ * @param renderer markdown service to be used for rendering
+ * @return a promise object to track the asynchronous operation
+ */
+export async function getDocumentationHtml(
+  markdownTexts: Array<String>,
+  grammarName: string,
+  renderer: MarkdownService
+): Promise<string | null> {
+  if (markdownTexts !== undefined && markdownTexts.length > 0) {
+    const markdownText = markdownTexts.join("\r\n")
+    return renderer.render(markdownText, grammarName)
+  }
+  return null
+}

src-commons-ui/float-pane/HTMLView.ts

@@ -0,0 +1,60 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import type { ReactElement } from "react"
+
+/**
+ * a reference to the DOMpurify function to make safe HTML strings
+ */
+import DOMPurify from "dompurify"
+
+/**
+ * an etch component that can host an externally given React component
+ */
+export class ReactView {
+  rootElement: HTMLElement
+  children?: ReactElement
+  childrenStatic?: string
+  containerClassName: string
+  contentClassName: string
+
+  /**
+   * creates a React view component handing over the React code to be rendered
+   * @param component the React component to be rendered
+   */
+  constructor({
+    component,
+    containerClassName,
+    contentClassName,
+  }: {
+    component: () => ReactElement
+    containerClassName: string
+    contentClassName: string
+  }) {
+    this.containerClassName = containerClassName
+    this.contentClassName = contentClassName
+    if (component) {
+      this.children = component()
+    }
+    this.render()
+    // etch.initialize(this);
+  }
+
+  render() {
+    this.rootElement = document.createElement("span")
+    this.rootElement.classList.add(this.containerClassName)
+    if (this.children) {
+      this.childrenStatic = DOMPurify.sanitize(renderToStaticMarkup(this.children))
+      this.rootElement.innerHTML = `
+          <div className="${this.contentClassName}">${this.childrenStatic}</div>
+      `
+    }
+    return this.rootElement
+  }
+
+  /**
+   * returns the root element of the React view component
+   * @return {HTMLElement} the root element wrapping the HTML content
+   */
+  get element(): HTMLElement {
+    return this.rootElement
+  }
+}