refactor: extension-code-block

- Rename `nodeActive` to `isNodeActive`.
- Use isInstanceOf factor function throughout app.

@remirror/core/src/extension-manager.ts

@@ -13,7 +13,7 @@ import {
   ignoreFunctions,
   transformExtensionMap,
 } from './extension-manager.helpers';
-import { bool, isEqual, isFunction, isObject } from './helpers';
+import { bool, isEqual, isFunction, isInstanceOf } from './helpers';
 import { createDocumentNode, CreateDocumentNodeParams, getPluginState } from './helpers/document';
 import { isMarkExtension } from './mark-extension';
 import { isNodeExtension } from './node-extension';
@@ -564,9 +564,7 @@ export class ExtensionManager implements ExtensionManagerInitParams {
  *
  * @param value - the value to check
  */
-export const isExtensionManager = (value: unknown): value is ExtensionManager => {
-  return isObject(value) && value instanceof ExtensionManager;
-};
+export const isExtensionManager = isInstanceOf(ExtensionManager);
 
 export interface ManagerParams {
   /**

@remirror/core/src/extension.ts

@@ -5,13 +5,12 @@ import { Cast, isObject } from './helpers/base';
 import {
   AttrsWithClass,
   BaseExtensionOptions,
+  BooleanFlexibleConfig,
+  CommandFlexibleConfig,
   CommandTypeParams,
   EditorStateParams,
-  ExtensionBooleanFunction,
-  ExtensionCommandFunction,
   ExtensionManagerParams,
   ExtensionType,
-  FlexibleConfig,
   KeyboardBindings,
   NodeViewMethod,
   ProsemirrorPlugin,
@@ -75,6 +74,7 @@ export abstract class Extension<
   // tslint:disable-next-line: no-unused
   GCommands extends string = string
 > {
+  public readonly VERSION = '0.3.0';
   /**
    * The options of this extension
    *
@@ -226,7 +226,7 @@ export interface Extension<GOptions extends BaseExtensionOptions = BaseExtension
    *
    * @param params - extension manager params
    */
-  active?(params: ExtensionManagerParams): FlexibleConfig<ExtensionBooleanFunction>;
+  active?(params: ExtensionManagerParams): BooleanFlexibleConfig;
 
   /**
    * Allows the extension to modify the default attributes for the actual editor.
@@ -270,15 +270,15 @@ export interface Extension<GOptions extends BaseExtensionOptions = BaseExtension
    *
    * @param params - schema params with type included
    */
-  commands?(params: CommandTypeParams<GType>): FlexibleConfig<ExtensionCommandFunction>;
+  commands?(params: CommandTypeParams<GType>): CommandFlexibleConfig;
 
   /**
    * Determines whether this extension is enabled. If an object is returned then it can define different node types and
    * the criteria for checks.
    *
    * @param params - extension manager parameters
    */
-  enabled?(params: ExtensionManagerParams): FlexibleConfig<ExtensionBooleanFunction>;
+  enabled?(params: ExtensionManagerParams): BooleanFlexibleConfig;
 
   /**
    * Register input rules which are activated if the regex matches as a user is typing.

@remirror/core/src/helpers/__tests__/utils.spec.ts

@@ -23,7 +23,7 @@ import {
   findParentNode,
   findParentNodeOfType,
   findPositionOfNodeBefore,
-  nodeActive,
+  isNodeActive,
   removeNodeAtPos,
   removeNodeBefore,
   selectionEmpty,
@@ -316,34 +316,34 @@ describe('findParentNodeOfType', () => {
 describe('nodeActive', () => {
   it('shows active when within an active region', () => {
     const { state, schema: sch } = createEditor(doc(p('Something', blockquote('is <cursor>in blockquote'))));
-    expect(nodeActive({ state, type: sch.nodes.blockquote })).toBeTrue();
+    expect(isNodeActive({ state, type: sch.nodes.blockquote })).toBeTrue();
   });
 
   it('returns false when not within the node', () => {
     const { state, schema: sch } = createEditor(doc(p('Something<cursor>', blockquote('hello'))));
-    expect(nodeActive({ state, type: sch.nodes.blockquote })).toBeFalse();
+    expect(isNodeActive({ state, type: sch.nodes.blockquote })).toBeFalse();
   });
 
   it('returns false with text selection surrounds the node', () => {
     const { state, schema: sch } = createEditor(
       doc(p('Something<start>', blockquote('is italic'), '<end> here')),
     );
-    expect(nodeActive({ state, type: sch.nodes.blockquote })).toBeFalse();
+    expect(isNodeActive({ state, type: sch.nodes.blockquote })).toBeFalse();
   });
 
   it('returns true when node selection directly before node', () => {
     const { state, schema: sch } = createEditor(doc(p('Something', blockquote('<node>is italic'), 'here')));
-    expect(nodeActive({ state, type: sch.nodes.blockquote })).toBeTrue();
+    expect(isNodeActive({ state, type: sch.nodes.blockquote })).toBeTrue();
   });
 
   it('returns false nested within other nodes', () => {
     const { state, schema: sch } = createEditor(doc(p('a<node>', p(p(blockquote('is italic')), 'here'))));
-    expect(nodeActive({ state, type: sch.nodes.blockquote })).toBeFalse();
+    expect(isNodeActive({ state, type: sch.nodes.blockquote })).toBeFalse();
   });
 
   it('matches nodes by specified attributes', () => {
     const { state, schema: sch } = createEditor(doc(p('Something', h2('is <cursor> heading'), 'here')));
-    expect(nodeActive({ state, type: sch.nodes.heading, attrs: { level: 1 } })).toBeFalse();
-    expect(nodeActive({ state, type: sch.nodes.heading, attrs: { level: 2 } })).toBeTrue();
+    expect(isNodeActive({ state, type: sch.nodes.heading, attrs: { level: 1 } })).toBeFalse();
+    expect(isNodeActive({ state, type: sch.nodes.heading, attrs: { level: 2 } })).toBeTrue();
   });
 });

@remirror/core/src/helpers/base.ts

@@ -359,11 +359,18 @@ const isOfType = <GType>(type: string) => (value: unknown): value is GType => ty
 const isObjectOfType = <GType>(type: TypeName) => (value: unknown): value is GType =>
   getObjectType(value) === type;
 
+/**
+ * Check if an instance is the direct instance of the provided class.
+ */
+export const isDirectInstanceOf = <T>(instance: unknown, Constructor: AnyConstructor<T>): instance is T =>
+  Object.getPrototypeOf(instance) === Constructor.prototype;
+
 /**
  * A shorthand method for creating instance of checks.
  */
-export const isInstanceOf = <GConstructor>(Constructor: any) => (value: unknown): value is GConstructor =>
-  isObject(value) && value instanceof Constructor;
+export const isInstanceOf = <GConstructor extends AnyConstructor>(Constructor: GConstructor) => (
+  value: unknown,
+): value is InstanceType<GConstructor> => isObject(value) && value instanceof Constructor;
 
 /**
  * Predicate check that value is undefined

@remirror/core/src/helpers/commands.ts

@@ -14,7 +14,7 @@ import {
 } from '../types';
 import { isFunction } from './base';
 import { getMarkRange, isNodeType } from './document';
-import { nodeActive, selectionEmpty } from './utils';
+import { isNodeActive, selectionEmpty } from './utils';
 
 interface UpdateMarkParams extends Partial<RangeParams>, Partial<AttrsParams>, TransformTransactionParams {
   /**
@@ -67,7 +67,7 @@ export const updateMark = ({ type, attrs = {}, appendText, range }: UpdateMarkPa
  * @public
  */
 export const toggleWrap = (type: NodeType, attrs?: Attrs): CommandFunction => (state, dispatch) => {
-  const isActive = nodeActive({ state, type });
+  const isActive = isNodeActive({ state, type });
 
   if (isActive) {
     return lift(state, dispatch);
@@ -89,7 +89,7 @@ export const toggleWrap = (type: NodeType, attrs?: Attrs): CommandFunction => (s
  * @public
  */
 export const toggleList = (type: NodeType, itemType: NodeType): CommandFunction => (state, dispatch) => {
-  const isActive = nodeActive({ state, type });
+  const isActive = isNodeActive({ state, type });
 
   if (isActive) {
     return liftListItem(itemType)(state, dispatch);
@@ -116,7 +116,7 @@ export const toggleBlockItem = ({ type, toggleType, attrs = {} }: ToggleBlockIte
   state,
   dispatch,
 ) => {
-  const isActive = nodeActive({ state, type, attrs });
+  const isActive = isNodeActive({ state, type, attrs });
 
   if (isActive) {
     return setBlockType(toggleType)(state, dispatch);

@remirror/core/src/helpers/document.ts

@@ -47,7 +47,7 @@ import { bool, Cast, environment, isFunction, isInstanceOf, isNumber, isObject,
  *
  * @public
  */
-export const isNodeType = isInstanceOf<NodeType<EditorSchema>>(NodeType);
+export const isNodeType = isInstanceOf(NodeType);
 
 /**
  * Check to see if the passed value is a MarkType.
@@ -56,7 +56,7 @@ export const isNodeType = isInstanceOf<NodeType<EditorSchema>>(NodeType);
  *
  * @public
  */
-export const isMarkType = isInstanceOf<MarkType<EditorSchema>>(MarkType);
+export const isMarkType = isInstanceOf(MarkType);
 
 /**
  * Checks to see if the passed value is a ProsemirrorNode
@@ -65,7 +65,7 @@ export const isMarkType = isInstanceOf<MarkType<EditorSchema>>(MarkType);
  *
  * @public
  */
-export const isProsemirrorNode = isInstanceOf<ProsemirrorNode>(PMNode);
+export const isProsemirrorNode = isInstanceOf(PMNode);
 
 /**
  * Checks to see if the passed value is a Prosemirror Editor State
@@ -74,7 +74,7 @@ export const isProsemirrorNode = isInstanceOf<ProsemirrorNode>(PMNode);
  *
  * @public
  */
-export const isEditorState = isInstanceOf<EditorState>(PMEditorState);
+export const isEditorState = isInstanceOf(PMEditorState);
 
 /**
  * Predicate checking whether the selection is a TextSelection
@@ -83,7 +83,7 @@ export const isEditorState = isInstanceOf<EditorState>(PMEditorState);
  *
  * @public
  */
-export const isTextSelection = isInstanceOf<TextSelection<EditorSchema>>(TextSelection);
+export const isTextSelection = isInstanceOf(TextSelection);
 
 /**
  * Predicate checking whether the selection is a Selection
@@ -92,7 +92,7 @@ export const isTextSelection = isInstanceOf<TextSelection<EditorSchema>>(TextSel
  *
  * @public
  */
-export const isSelection = isInstanceOf<Selection>(PMSelection);
+export const isSelection = isInstanceOf(PMSelection);
 
 interface IsMarkActiveParams extends MarkTypeParams, EditorStateParams, Partial<FromToParams> {}
 

@remirror/core/src/helpers/utils.ts

@@ -222,7 +222,7 @@ interface NodeActiveParams extends EditorStateParams, NodeTypeParams, Partial<At
  *
  * @public
  */
-export const nodeActive = ({ state, type, attrs = {} }: NodeActiveParams) => {
+export const isNodeActive = ({ state, type, attrs = {} }: NodeActiveParams) => {
   const predicate = (node: ProsemirrorNode) => node.type === type;
   const parent = findParentNode(predicate)(state.selection);
 

@remirror/core/src/mark-extension.ts

@@ -3,9 +3,7 @@ import { Extension, isExtension } from './extension';
 import { isMarkActive } from './helpers/document';
 import {
   EditorSchema,
-  ExtensionBooleanFunction,
   ExtensionType,
-  FlexibleConfig,
   MarkExtensionOptions,
   MarkExtensionSpec,
   SchemaMarkTypeParams,
@@ -33,7 +31,7 @@ export abstract class MarkExtension<
 
   public abstract readonly schema: MarkExtensionSpec;
 
-  public active({ getState, type }: SchemaMarkTypeParams): FlexibleConfig<ExtensionBooleanFunction> {
+  public active({ getState, type }: SchemaMarkTypeParams): BooleanFlexibleConfig {
     return () => isMarkActive({ state: getState(), type });
   }
 }
@@ -44,4 +42,4 @@ export abstract class MarkExtension<
  * @param extension - the extension to check
  */
 export const isMarkExtension = (extension: unknown): extension is MarkExtension<any> =>
-  isExtension(extension) && extension instanceof MarkExtension;
+  isExtension(extension) && extension.type === ExtensionType.MARK;

@remirror/core/src/node-extension.ts

@@ -1,11 +1,10 @@
 import { NodeType } from 'prosemirror-model';
 import { Extension, isExtension } from './extension';
-import { nodeActive } from './helpers/utils';
+import { isNodeActive } from './helpers/utils';
 import {
+  BooleanFlexibleConfig,
   EditorSchema,
-  ExtensionBooleanFunction,
   ExtensionType,
-  FlexibleConfig,
   NodeExtensionOptions,
   NodeExtensionSpec,
   SchemaNodeTypeParams,
@@ -32,9 +31,9 @@ export abstract class NodeExtension<
    */
   public abstract readonly schema: NodeExtensionSpec;
 
-  public active({ getState, type }: SchemaNodeTypeParams): FlexibleConfig<ExtensionBooleanFunction> {
+  public active({ getState, type }: SchemaNodeTypeParams): BooleanFlexibleConfig {
     return attrs => {
-      return nodeActive({ state: getState(), type, attrs });
+      return isNodeActive({ state: getState(), type, attrs });
     };
   }
 }
@@ -45,4 +44,4 @@ export abstract class NodeExtension<
  * @param extension - the extension to check
  */
 export const isNodeExtension = (extension: unknown): extension is NodeExtension<any> =>
-  isExtension(extension) && extension instanceof NodeExtension;
+  isExtension(extension) && extension.type === ExtensionType.NODE;

@remirror/core/src/types/base.ts

@@ -59,7 +59,7 @@ export type AnyFunction<GType = any> = (...args: any[]) => GType;
 /**
  * Matches any constructor type
  */
-export type AnyConstructor<GType = any> = new (...args: any[]) => GType;
+export type AnyConstructor<GType = unknown> = new (...args: any[]) => GType;
 
 /**
  * Makes specified keys of an interface optional while the rest stay the same.

@remirror/core/src/types/index.ts

@@ -137,6 +137,9 @@ export type FlexibleConfig<GFunc extends AnyFunction, GNames extends string = st
 export type ExtensionCommandFunction = (attrs?: Attrs) => CommandFunction;
 export type ExtensionBooleanFunction = (attrs?: Attrs) => boolean;
 
+export type BooleanFlexibleConfig = FlexibleConfig<ExtensionBooleanFunction>;
+export type CommandFlexibleConfig = FlexibleConfig<ExtensionCommandFunction>;
+
 type InferredType<GType> = GType extends {} ? { type: GType } : {};
 export type SchemaTypeParams<GType> = ExtensionManagerParams & InferredType<GType>;
 

@remirror/editor-wysiwyg/package.json

@@ -35,12 +35,13 @@
     "@babel/runtime": "^7.5.4",
     "@emotion/core": "^10.0.14",
     "@emotion/styled": "^10.0.14",
+    "refractor": "^2.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@remirror/core": "0.3.0",
     "@remirror/core-extensions": "0.3.0",
-    "@remirror/extension-emoji": "0.3.0",
+    "@remirror/extension-code-block": "0.3.0",
     "@remirror/react": "0.3.0",
     "@remirror/react-utils": "0.3.0",
     "deepmerge": "^4.0.0",

@remirror/editor-wysiwyg/src/components/editor.tsx

@@ -5,7 +5,6 @@ import {
   BlockquoteExtension,
   BoldExtension,
   BulletListExtension,
-  CodeBlockExtension,
   CodeExtension,
   HardBreakExtension,
   HeadingExtension,
@@ -20,6 +19,7 @@ import {
   StrikeExtension,
   UnderlineExtension,
 } from '@remirror/core-extensions';
+import { CodeBlockExtension, CodeBlockExtensionOptions } from '@remirror/extension-code-block';
 import { ManagedRemirrorProvider, RemirrorExtension, RemirrorManager, useRemirror } from '@remirror/react';
 import { asDefaultProps, RemirrorManagerProps } from '@remirror/react-utils';
 import deepMerge from 'deepmerge';
@@ -95,7 +95,7 @@ export class WysiwygEditor extends PureComponent<WysiwygEditorProps> {
           <RemirrorExtension Constructor={BulletListExtension} />
           <RemirrorExtension Constructor={OrderedListExtension} />
           <RemirrorExtension Constructor={HardBreakExtension} />
-          <RemirrorExtension Constructor={CodeBlockExtension} />
+          <RemirrorExtension<CodeBlockExtensionOptions> Constructor={CodeBlockExtension} />
           <RemirrorExtension Constructor={SSRHelperExtension} />
           <ManagedRemirrorProvider {...props}>
             <InnerEditor

@remirror/editor-wysiwyg/src/components/menu.tsx

@@ -47,7 +47,7 @@ const menuItems: Array<[string, [IconDefinition, string?], Attrs?]> = [
   ['bulletList', [faList]],
   ['orderedList', [faListOl]],
   ['blockquote', [faQuoteRight]],
-  ['codeBlock', [faCode]],
+  ['codeBlockToggle', [faCode]],
   ['horizontalRule', [faGripLines]],
 ];
 
@@ -73,7 +73,6 @@ interface MenuBarProps extends Pick<BubbleMenuProps, 'activateLink'> {
  */
 export const MenuBar: FC<MenuBarProps> = ({ inverse, activateLink }) => {
   const { actions } = useRemirror();
-
   return (
     <Toolbar>
       {menuItems.map(([name, [icon, subText], attrs], index) => {
@@ -148,9 +147,11 @@ const bubbleMenuItems: Array<[string, [IconDefinition, string?], Attrs?]> = [
 
 export const BubbleMenu: FC<BubbleMenuProps> = ({ linkActivated = false, deactivateLink, activateLink }) => {
   const { actions, getPositionerProps } = useRemirror();
+  console.log(actions.codeBlockToggle.isActive());
   const { bottom, left, ref } = getPositionerProps({
     ...bubblePositioner,
-    isActive: params => bubblePositioner.isActive(params) || linkActivated,
+    isActive: params =>
+      (bubblePositioner.isActive(params) || linkActivated) && !actions.codeBlockToggle.isActive(),
     positionerId: 'bubbleMenu',
   });