more cleanup

renames p5CompletionPreview because it's more of a generic preview and not p5 specific. prep for an eventual folder reorganizing

Author: khanniie

…components/Editor/p5CompletionPreview.js …E/components/Editor/completionPreview.jsclient/modules/IDE/components/Editor/p5CompletionPreview.js renamed to client/modules/IDE/components/Editor/completionPreview.js client/modules/IDE/components/Editor/p5CompletionPreview.js renamed to client/modules/IDE/components/Editor/completionPreview.js

@@ -2,6 +2,7 @@ import { StateField, RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 import { selectedCompletion, completionStatus } from '@codemirror/autocomplete';
 
+/** Creates a "ghost" of what the completion would look like, for autocomplete selections. */
 class GhostTextWidget extends WidgetType {
   constructor(text) {
     super();
@@ -94,7 +95,7 @@ const ghostTextField = StateField.define({
   provide: (field) => EditorView.decorations.from(field)
 });
 
-export const p5CompletionPreviewTheme = EditorView.theme({
+export const completionPreviewTheme = EditorView.theme({
   '.cm-ghostCompletion': {
     opacity: '0.55',
     fontStyle: 'italic',
@@ -103,6 +104,6 @@ export const p5CompletionPreviewTheme = EditorView.theme({
   }
 });
 
-export function p5CompletionPreview() {
-  return [ghostTextField, p5CompletionPreviewTheme];
+export function completionPreview() {
+  return [ghostTextField, completionPreviewTheme];
 }

client/modules/IDE/components/Editor/p5JavaScript.js

@@ -3,7 +3,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { ViewPlugin, Decoration } from '@codemirror/view';
 import { RangeSetBuilder } from '@codemirror/state';
 import { p5Hinter } from '../../../../utils/p5-hinter';
-import { p5CompletionPreview } from './p5CompletionPreview';
+import { completionPreview } from './completionPreview';
 import contextAwareHinter from '../../../../utils/contextAwareHinter';
 import {
   p5FunctionKeywords,
@@ -66,14 +66,14 @@ function addCompletions(context) {
   });
 }
 
-export default function p5JavaScript() {
+export function p5JavaScript() {
   const jsLang = javascript();
   return new LanguageSupport(jsLang.language, [
     jsLang.extension,
     jsLang.language.data.of({
       autocomplete: addCompletions
     }),
-    p5CompletionPreview(),
+    completionPreview(),
     p5Highlight
   ]);
 }

client/modules/IDE/components/Editor/stateUtils.js

@@ -52,7 +52,7 @@ import { emmetConfig } from '@emmetio/codemirror6-plugin';
 import { color as colorPicker } from '@connieye/codemirror-color-picker';
 
 import { tidyCodeWithPrettier } from './tidier';
-import p5JavaScript from './p5JavaScript';
+import { p5JavaScript } from './p5JavaScript';
 import { highlightStyle } from './highlightStyle';
 import { errorDecorationStateField } from './consoleErrorDecoration';
 import {
@@ -407,8 +407,7 @@ export function createNewFileState(filename, document, settings) {
 
   // Only enable the color picker for Javascript and CSS, which
   // have both been tested.
-  const fileMode = getFileMode(filename);
-  if (fileMode === 'javascript' || fileMode === 'css') {
+  if (mode === 'javascript' || mode === 'css') {
     extensions.push(colorPicker);
   }