Fix autocomplete and squash some bugs

powercord-org · Dec 9, 2020 · 0530b0d · 0530b0d
1 parent 547a2d5
commit 0530b0d
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 52 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,6 @@
 .vscode
 /.cache
 /.logs
-/.glasscord
 node_modules
 package-lock.json
 yarn.lock
@@ -12,8 +11,6 @@ src/Powercord/plugins/*
 !src/Powercord/plugins/pc-*
 
 src/Powercord/coremods/react-devtools/ext
-src/Powercord/plugins/pc-reactdevtools/rdt.crx
-src/Powercord/plugins/pc-reactdevtools/react-dev-tools/*
 src/Powercord/plugins/pc-styleManager/themes/*
 src/Powercord/themes/*
 !src/Powercord/themes/.exists

diff --git a/src/Powercord/coremods/badges/index.js b/src/Powercord/coremods/badges/index.js
@@ -171,7 +171,8 @@ module.exports = async function () {
     if (modalClasses) {
       const modalHeader = document.querySelector(`.${modalClasses.topSectionNormal} header`);
       if (modalHeader) {
-        getOwnerInstance(modalHeader)._reactInternals.return.stateNode.forceUpdate();
+        const instance = getOwnerInstance(modalHeader);
+        (instance._reactInternals || instance._reactInternalFiber).return.stateNode.forceUpdate();
       }
     }
   };

diff --git a/src/Powercord/coremods/router/index.js b/src/Powercord/coremods/router/index.js
@@ -44,7 +44,7 @@ async function injectViews () {
 async function injectSidebar () {
   const { panels } = await getModule([ 'panels' ]);
   const instance = getOwnerInstance(await waitFor(`.${panels}`));
-  inject('pc-router-sidebar', instance._reactInternals.type.prototype, 'render', (_, res) => {
+  inject('pc-router-sidebar', (instance._reactInternals || instance._reactInternalFiber).type.prototype, 'render', (_, res) => {
     const renderer = res.props.children;
     res.props.children = (props) => {
       const rendered = renderer(props);
@@ -68,7 +68,7 @@ async function forceRouterUpdate () {
   // Views
   const { app } = getAllModules([ 'app' ]).find(m => Object.keys(m).length === 1);
   const viewsInstance = getOwnerInstance(await waitFor(`.${app}`));
-  findInTree(viewsInstance._reactInternals, n => n && n.historyUnlisten, { walkable: [ 'child', 'stateNode' ] }).forceUpdate();
+  findInTree(viewsInstance._reactInternals || viewsInstance._reactInternalFiber, n => n && n.historyUnlisten, { walkable: [ 'child', 'stateNode' ] }).forceUpdate();
 
   // Routes
   const { container } = await getModule([ 'container', 'downloadProgressCircle' ]);

diff --git a/src/Powercord/index.js b/src/Powercord/index.js
@@ -80,7 +80,6 @@ class Powercord extends Updatable {
     if (isOverlay) { // eh
       // await sleep(250);
     }
-    await sleep(1e3);
 
     // Webpack & Modules
     await Webpack.init();

diff --git a/src/Powercord/plugins/pc-codeblocks/index.js b/src/Powercord/plugins/pc-codeblocks/index.js
@@ -1,7 +1,7 @@
 const { Plugin } = require('powercord/entities');
 const { React, getModule, hljs, i18n: { Messages } } = require('powercord/webpack');
 const { inject, uninject } = require('powercord/injector');
-const { getReactInstance, findInReactTree } = require('powercord/util');
+const { getReactInstance } = require('powercord/util');
 const { clipboard } = require('electron');
 
 module.exports = class Codeblocks extends Plugin {
@@ -11,67 +11,60 @@ module.exports = class Codeblocks extends Plugin {
   }
 
   pluginWillUnload () {
-    uninject('pc-codeblocks-inline');
-    uninject('pc-codeblocks-embed');
+    uninject('pc-codeblocks-format');
     this._forceUpdate();
   }
 
   async patchCodeblocks () {
     const parser = await getModule([ 'parse', 'parseTopic' ]);
-    inject('pc-codeblocks-inline', parser.defaultRules.codeBlock, 'react', (args, res) => {
+    inject('pc-codeblocks-format', parser.defaultRules.codeBlock, 'react', (args, res) => {
       this.injectCodeblock(args, res);
 
       return res;
     });
 
-    inject('pc-codeblocks-embed', parser, 'parseAllowLinks', (_, res) => {
-      for (const children of res) {
-        const codeblock = findInReactTree(children, n => n.type && n.type.name === '');
-        if (codeblock) {
-          this.injectCodeblock(null, codeblock);
-        }
-      }
-
-      return res;
-    });
-
     this._forceUpdate();
   }
 
-  injectCodeblock (args, codeblock) {
-    const { render } = codeblock.props;
+  injectCodeblock (args, res) {
+    const { render } = res.props;
+
+    res.props.render = (props) => {
+      const codeblock = render(props);
+      const codeElement = codeblock.props.children;
 
-    codeblock.props.render = (codeblock) => {
-      const res = render(codeblock);
+      const classes = codeElement.props.className.split(' ');
 
-      const { children } = res.props;
-      const lang = args ? args[0].lang : children.props.className.split(' ').find(className => !className.includes('-') && className !== 'hljs');
-      const isHljs = !!children.props.dangerouslySetInnerHTML;
-      const lines = children.props.dangerouslySetInnerHTML
-        ? children.props.dangerouslySetInnerHTML.__html
-          // Ensure there is no span on multiple lines
+      const lang = args ? args[0].lang : classes[classes.indexOf('hljs') + 1];
+      const lines = codeElement.props.dangerouslySetInnerHTML
+        ? codeElement.props.dangerouslySetInnerHTML.__html
+          // Ensure this no span on multiple lines
           .replace(
             /<span class="(hljs-[a-z]+)">([^<]*)<\/span>/g,
             (_, className, code) => code.split('\n').map(l => `<span class="${className}">${l}</span>`).join('\n')
           )
           .split('\n')
-        : children.props.children.split('\n');
+        : codeElement.props.children.split('\n');
 
-      delete children.props.dangerouslySetInnerHTML;
-      children.props.children = this.renderCodeblock(lang, lines, isHljs);
-      return res;
+      delete codeElement.props.dangerouslySetInnerHTML;
+
+      codeElement.props.children = this.renderCodeblock(lang, lines);
+
+      return codeblock;
     };
   }
 
-  renderCodeblock (lang, lines, isHljs) {
-    const language = hljs.getLanguage(lang);
+  renderCodeblock (lang, lines) {
+    if (typeof hljs.getLanguage !== 'undefined') {
+      lang = hljs.getLanguage(lang);
+    }
 
     return React.createElement(React.Fragment, null,
-      language && React.createElement('div', { className: 'powercord-codeblock-lang' }, language.name),
+      lang && React.createElement('div', { className: 'powercord-codeblock-lang' }, lang.name),
       React.createElement('table', { className: 'powercord-codeblock-table' },
         ...lines.map((line, i) => React.createElement('tr', null,
           React.createElement('td', null, i + 1),
-          React.createElement('td', isHljs ? { dangerouslySetInnerHTML: { __html: line } } : { children: line })
+          React.createElement('td', lang ? { dangerouslySetInnerHTML: { __html: line } } : { children: line })
         ))
       ),
       React.createElement('button', {
@@ -93,7 +86,7 @@ module.exports = class Codeblocks extends Plugin {
     setTimeout(() => {
       target.innerText = Messages.COPY;
       target.classList.remove('copied');
-    }, 1000);
+    }, 1e3);
 
     const code = [ ...target.parentElement.querySelectorAll('td:last-child') ].map(t => t.textContent).join('\n');
     clipboard.writeText(code);

diff --git a/src/Powercord/plugins/pc-codeblocks/style.css b/src/Powercord/plugins/pc-codeblocks/style.css
@@ -8,10 +8,10 @@
 
 .powercord-codeblock-lang {
   color: var(--text-normal);
-  border-bottom: 1px solid rgba(0, 0, 0, .2);
+  border-bottom: 1px solid var(--background-modifier-accent);
   padding: 0 5px;
   margin-bottom: 6px;
-  font-size: 0.8em;
+  font-size: .8em;
   font-family: 'Raleway', sans-serif;
   font-weight: bold;
 }
@@ -26,7 +26,7 @@
 }
 
 .powercord-codeblock-table td:first-child {
-  border-right: 1px solid rgba(0, 0, 0, .2);
+  border-right: 1px solid var(--background-modifier-accent);
   padding-left: 5px;
   padding-right: 8px;
   user-select: none;
@@ -44,12 +44,12 @@
   line-height: 20px;
   padding: 0 10px;
   font-family: 'Raleway', sans-serif;
-  font-size: 0.8em;
+  font-size: .8em;
   text-transform: uppercase;
   font-weight: bold;
 
   margin: 3px;
-  background: rgba(0, 0, 0, .5);
+  background: var(--background-floating);
   position: absolute;
   right: 0 !important;
   bottom: 0 !important;
@@ -58,7 +58,7 @@
 }
 
 .powercord-codeblock-copy-btn.copied {
-  background-color: #00c853;
+  background-color: #43b581;
   opacity: 1;
 }
 

diff --git a/src/Powercord/plugins/pc-commands/injectAutocomplete.js b/src/Powercord/plugins/pc-commands/injectAutocomplete.js
@@ -61,7 +61,7 @@ module.exports = async function injectAutocomplete () {
         return autocompleteRows;
       }
     },
-    renderResults: (_channel, value, selected, onHover, onClick, _state, autocomplete) => {
+    renderResults: (_channel, value, selected, onHover, onClick, _state, _props, autocomplete) => {
       if (autocomplete && autocomplete.commands) {
         const { commands } = autocomplete;
         const customHeader = Array.isArray(commands.__header) ? commands.__header : [ commands.__header ];
@@ -105,7 +105,7 @@ module.exports = async function injectAutocomplete () {
     queryResults: (_channel, value) => ({
       commands: powercord.api.commands.filter(c => (getMatchingCommand(c)).some(commandName => commandName.includes(value)))
     }),
-    renderResults: (_channel, value, selected, onHover, onClick, _state, autocomplete) => {
+    renderResults: (_channel, value, selected, onHover, onClick, _state, _props, autocomplete) => {
       if (autocomplete && autocomplete.commands) {
         return renderCommandResults(value, selected, autocomplete.commands, onHover, onClick, c => ({
           key: `powercord-${c.command}`,

diff --git a/src/fake_node_modules/powercord/components/ColorPicker.jsx b/src/fake_node_modules/powercord/components/ColorPicker.jsx
diff --git a/src/fake_node_modules/powercord/webpack/index.js b/src/fake_node_modules/powercord/webpack/index.js