Merge pull request #3848 from processing/autocomplete-ref-2.0

Update Autocomplete Hinter Reference URL to 2.x Docs on Version Change

Author: raclim

client/modules/IDE/components/Editor/index.jsx

@@ -421,6 +421,17 @@ class Editor extends React.Component {
     this._cm.execCommand('findPersistent');
   }
 
+  // temporary until p5.js 2.0 becomes default
+  // checks if sketch is using p5.js 2.0 to pass correct base url for autocomplete hinter reference
+  getReferenceBaseUrl = () => {
+    const html = this.props.htmlFile?.content || '';
+
+    const isV2 =
+      /https:\/\/beta\.p5js\.org\b/i.test(html) || /\bp5(@|-)2\./i.test(html);
+
+    return isV2 ? 'https://beta.p5js.org' : 'https://p5js.org';
+  };
+
   showHint(_cm) {
     if (!_cm) return;
 
@@ -460,6 +471,7 @@ class Editor extends React.Component {
 
     const hintOptions = {
       _fontSize: this.props.fontSize,
+      referenceBaseUrl: this.getReferenceBaseUrl(),
       completeSingle: false,
       extraKeys: {
         'Shift-Right': (cm, e) => {
@@ -731,6 +743,9 @@ Editor.propTypes = {
       content: PropTypes.string.isRequired
     })
   ).isRequired,
+  htmlFile: PropTypes.shape({
+    content: PropTypes.string
+  }),
   isExpanded: PropTypes.bool.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   closeProjectOptions: PropTypes.func.isRequired,
@@ -744,6 +759,10 @@ Editor.propTypes = {
   expandConsole: PropTypes.func.isRequired
 };
 
+Editor.defaultProps = {
+  htmlFile: null
+};
+
 function mapStateToProps(state) {
   return {
     files: state.files,

client/modules/IDE/components/show-hint.js

@@ -296,11 +296,12 @@ import CodeMirror from 'codemirror';
   }
 
   // hintsElement is the parent for hints and el is the clicked element within that container
-  function displayHint(name, type, p5, isBlacklistedFunction) {
+  function displayHint(name, type, p5, isBlacklistedFunction, referenceBaseUrl) {
+    const base = referenceBaseUrl || 'https://p5js.org';
+    const refName = typeof p5 === 'string' ? p5 : name;
+
     const linkOrPlaceholder = p5
-      ? `<a href="https://p5js.org/reference/p5/${
-          typeof p5 === 'string' ? p5 : name
-        }" role="link" onclick="event.stopPropagation()" target="_blank">
+      ? `<a href="${base}/reference/p5/${refName}" role="link" onclick="event.stopPropagation()" target="_blank">
       <span class="hint-hidden">open ${name} reference</span>
       <span aria-hidden="true" class="arrow-icon">➔</span>
     </a>`
@@ -400,6 +401,8 @@ import CodeMirror from 'codemirror';
     hints.className = 'CodeMirror-hints ' + theme;
     this.selectedHint = data.selectedHint || 0;
 
+    const referenceBaseUrl = completion.options.referenceBaseUrl || 'https://p5js.org';
+
     // Show inline hint
     changeInlineHint(cm, data.list[this.selectedHint]);
 
@@ -430,7 +433,8 @@ import CodeMirror from 'codemirror';
             name,
             cur.item.type,
             cur.item.p5,
-            cur.isBlacklisted
+            cur.isBlacklisted,
+            referenceBaseUrl
           );
         }