Fix GistTag & RunkitTag preview issue (#3388)

2019-07-09 15:58:08 -04:00 · 2019-07-09 15:58:08 -04:00 · 90f54773dc
commit 90f54773dc
parent 87002e5786
6 changed files with 92 additions and 60 deletions
--- a/app/javascript/article-form/articleForm.jsx
+++ b/app/javascript/article-form/articleForm.jsx
@ -1,6 +1,7 @@
 import 'preact/devtools';
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
+import postscribe from 'postscribe';
 import ImageUploadIcon from 'images/image-upload.svg';
 import ThreeDotsIcon from 'images/three-dots.svg';
 import { submitArticle, previewArticle } from './actions';
@ -18,6 +19,29 @@ import OrgSettings from './elements/orgSettings';
 import Errors from './elements/errors';

 export default class ArticleForm extends Component {
+  static handleGistPreview() {
+    const els = document.getElementsByClassName('ltag_gist-liquid-tag');
+    for (let i = 0; i < els.length; i += 1) {
+      postscribe(els[i], els[i].firstElementChild.outerHTML);
+    }
+  }
+
+  static handleRunkitPreview() {
+    const targets = document.getElementsByClassName('runkit-element');
+    for (let i = 0; i < targets.length; i += 1) {
+      if (targets[i].children.length > 0) {
+        const preamble = targets[i].children[0].textContent;
+        const content = targets[i].children[1].textContent;
+        targets[i].innerHTML = '';
+        window.RunKit.createNotebook({
+          element: targets[i],
+          source: content,
+          preamble,
+        });
+      }
+    }
+  }
+
  constructor(props) {
    super(props);
    this.article = JSON.parse(this.props.article);
@ -55,7 +79,7 @@ export default class ArticleForm extends Component {
  }

  componentDidMount() {
-    const { version } = this.state
+    const { version } = this.state;
    const previousContent = JSON.parse(
      localStorage.getItem(`editor-${version}-${window.location.href}`),
    );
@ -80,6 +104,14 @@ export default class ArticleForm extends Component {
    // myCodeMirror.setSize('100%', '100%');
  }

+  componentDidUpdate() {
+    const { previewResponse } = this.state;
+    if (previewResponse) {
+      this.constructor.handleGistPreview();
+      this.constructor.handleRunkitPreview();
+    }
+  }
+
  checkContentChanges = previousContent =>
    this.state.bodyMarkdown !== previousContent.bodyMarkdown ||
    this.state.title !== previousContent.title ||
@ -87,7 +119,7 @@ export default class ArticleForm extends Component {
    this.state.tagList !== previousContent.tagList;

  localStoreContent = () => {
-    const { version, title, tagList, mainImage, bodyMarkdown } = this.state
+    const { version, title, tagList, mainImage, bodyMarkdown } = this.state;
    localStorage.setItem(
      `editor-${version}-${this.url}`,
      JSON.stringify({
@ -146,19 +178,19 @@ export default class ArticleForm extends Component {
        helpShowing: false,
        previewResponse: response,
        errors: null,
-      });  
+      });
    } else {
      this.setState({
        errors: response,
        submitting: false,
-      });  
+      });
    }
  };

  handleOrgIdChange = e => {
    const organizationId = e.target.selectedOptions[0].value;
-    this.setState({ organizationId })
-  }
+    this.setState({ organizationId });
+  };

  failedPreview = response => {
    console.log(response);
@ -179,7 +211,7 @@ export default class ArticleForm extends Component {
  };

  removeLocalStorage = () => {
-    const {version} = this.state
+    const { version } = this.state;
    localStorage.removeItem(`editor-${version}-${this.url}`);
    window.removeEventListener('beforeunload', this.localStoreContent);
  };
@ -204,11 +236,9 @@ export default class ArticleForm extends Component {
    if (e.keyCode === 13) {
      e.preventDefault();
    }
-  }
+  };

-  handleBodyKeyDown = e => {
-
-  }
+  handleBodyKeyDown = _e => {};

  onClearChanges = e => {
    e.preventDefault();
@ -275,14 +305,19 @@ export default class ArticleForm extends Component {
      organizationId,
      mainImage,
      errors,
-      version
+      version,
    } = this.state;
-    const notice = submitting ? <Notice published={published} version={version} /> : '';
-    const imageArea = (mainImage && !previewShowing && version === 'v2') ? (
-      <MainImage mainImage={mainImage} onEdit={this.toggleImageManagement} />
+    const notice = submitting ? (
+      <Notice published={published} version={version} />
    ) : (
      ''
    );
+    const imageArea =
+      mainImage && !previewShowing && version === 'v2' ? (
+        <MainImage mainImage={mainImage} onEdit={this.toggleImageManagement} />
+      ) : (
+        ''
+      );
    const imageManagement = imageManagementShowing ? (
      <ImageManagement
        onExit={this.toggleImageManagement}
@ -303,15 +338,16 @@ export default class ArticleForm extends Component {
    ) : (
      ''
    );
-    const orgArea = (organizations && organizations.length > 0) ? (
-      <OrgSettings
-        organizations={organizations}
-        organizationId={organizationId}
-        onToggle={this.handleOrgIdChange}
-      />
-    ) : (
-      ''
-    );
+    const orgArea =
+      organizations && organizations.length > 0 ? (
+        <OrgSettings
+          organizations={organizations}
+          organizationId={organizationId}
+          onToggle={this.handleOrgIdChange}
+        />
+      ) : (
+        ''
+      );
    const errorsArea = errors ? <Errors errorsList={errors} /> : '';
    let editorView = '';
    if (previewShowing) {
@ -328,29 +364,39 @@ export default class ArticleForm extends Component {
        </div>
      );
    } else if (helpShowing) {
-      editorView = <BodyPreview previewResponse={{processed_html: helpHTML}} version="help" />;
+      editorView = (
+        <BodyPreview
+          previewResponse={{ processed_html: helpHTML }}
+          version="help"
+        />
+      );
    } else {
      let controls = '';
      let moreConfigBottomButton = '';
      if (version === 'v2') {
        moreConfigBottomButton = (
          <button
-            type='button'
+            type="button"
            className="articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom"
            onClick={this.toggleMoreConfig}
          >
-            <img src={ThreeDotsIcon} alt='menu dots' />
+            <img src={ThreeDotsIcon} alt="menu dots" />
          </button>
-        )
+        );
        controls = (
-          <div className={title.length > 128 ? 'articleform__titleTooLong' : ''}>
+          <div
+            className={title.length > 128 ? 'articleform__titleTooLong' : ''}
+          >
            <Title
              defaultValue={title}
              onKeyDown={this.handleTitleKeyDown}
              onChange={linkState(this, 'title')}
            />
            <div className="articleform__detailfields">
-              <Tags defaultValue={tagList} onInput={linkState(this, 'tagList')} />
+              <Tags
+                defaultValue={tagList}
+                onInput={linkState(this, 'tagList')}
+              />
              <button
                className="articleform__detailsButton articleform__detailsButton--image"
                onClick={this.toggleImageManagement}
@ -367,7 +413,7 @@ export default class ArticleForm extends Component {
              </button>
            </div>
          </div>
-        )
+        );
      }
      editorView = (
        <div>
--- a/app/liquid_tags/gist_tag.rb
+++ b/app/liquid_tags/gist_tag.rb
@ -15,17 +15,6 @@ class GistTag < LiquidTagBase
    )
  end

-  def self.special_script
-    <<~JAVASCRIPT
-      if (postscribe) {
-        var els = document.getElementsByClassName("ltag_gist-liquid-tag")
-        for (i = 0; i < els.length; i++) {
-            postscribe(els[i], els[i].firstElementChild.outerHTML);
-        }
-      }
-    JAVASCRIPT
-  end
-
  private

  def build_uri(link)
--- a/app/liquid_tags/runkit_tag.rb
+++ b/app/liquid_tags/runkit_tag.rb
@ -18,24 +18,6 @@ class RunkitTag < Liquid::Block
    )
  end

-  def self.special_script
-    <<~JAVASCRIPT
-      var targets = document.getElementsByClassName("runkit-element");
-      for (var i = 0; i < targets.length; i++) {
-        if (targets[i].children.length > 0) {
-          var preamble = targets[i].children[0].textContent;
-          var content = targets[i].children[1].textContent;
-          targets[i].innerHTML = "";
-          var notebook = RunKit.createNotebook({
-            element: targets[i],
-            source: content,
-            preamble: preamble
-          });
-        }
-      }
-    JAVASCRIPT
-  end
-
  def self.script
    <<~JAVASCRIPT
      var checkRunkit = setInterval(function() {
--- a/app/views/articles/_v2_form.html.erb
+++ b/app/views/articles/_v2_form.html.erb
@ -1,3 +1,5 @@
+<%= javascript_include_tag "https://embed.runkit.com", defer: true %>
+
 <div class="articleformcontainer">
  <div class="articleform"
       id="article-form"
--- a/package.json
+++ b/package.json
@ -96,6 +96,7 @@
    "linkstate": "^1.1.1",
    "lodash.debounce": "4.0.8",
    "marked": "^0.7.0",
+    "postscribe": "^2.0.8",
    "preact": "^8.4.2",
    "preact-compat": "^3.19.0",
    "preact-textarea-autosize": "^4.0.7",
--- a/yarn.lock
+++ b/yarn.lock
@ -9564,6 +9564,13 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.2, postcss@^7.0.5:
    source-map "^0.6.1"
    supports-color "^6.1.0"

+postscribe@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/postscribe/-/postscribe-2.0.8.tgz#5b7a53aad4b690b6c2f75818fcefe74490f410d5"
+  integrity sha1-W3pTqtS2kLbC91gY/O/nRJD0ENU=
+  dependencies:
+    prescribe ">=1.1.2"
+
 preact-compat@^3.19.0:
  version "3.19.0"
  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.19.0.tgz#a71457b6a3bf051690a4411603bc2085aa061c2f"
@ -9627,6 +9634,11 @@ prepend-http@^1.0.0:
  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=

+prescribe@>=1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prescribe/-/prescribe-1.1.3.tgz#8d3122445f3fbaf4c4c5817ea527a17fc8139ee6"
+  integrity sha1-jTEiRF8/uvTExYF+pSehf8gTnuY=
+
 preserve@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"