Require file extensions for imports and exports

.eslintrc.js

@@ -43,7 +43,21 @@ module.exports = {
         'no-console': ['warn', { allow: ['warn', 'error'] }],
         semi: ['error', 'never'],
         'import/order': 'off',
-        'import/extensions': 'off',
+        'import/extensions': ['error', 'ignorePackages'],
+        'no-restricted-imports': ['error',
+          {
+            paths: [
+              {
+                name: '..',
+                message: 'Import from ../index.js instead.',
+              },
+              {
+                name: '.',
+                message: 'Import from ./index.js instead.',
+              },
+            ],
+          },
+        ],
         'import/no-extraneous-dependencies': 'off',
         'import/no-unresolved': 'off',
         'import/no-dynamic-require': 'off',

demos/preview/Shiki.vue

@@ -8,7 +8,7 @@
 // otherwise the `onig.wasm` file is missing in the dist folder
 import 'shiki/dist/onig.wasm?url'
 
-import Worker from './shiki.worker?worker'
+import Worker from './shiki.worker.js?worker'
 
 export default {
   props: {

demos/setup/js.ts

@@ -1,7 +1,7 @@
 import 'iframe-resizer/js/iframeResizer.contentWindow'
 import './style.scss'
 
-import { debug } from './helper'
+import { debug } from './helper.js'
 
 export default function init(name: string, source: any) {
   // @ts-ignore

demos/setup/react.ts

@@ -4,7 +4,7 @@ import './style.scss'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { debug, splitName } from './helper'
+import { debug, splitName } from './helper.js'
 
 export default function init(name: string, source: any) {
   // @ts-ignore

demos/setup/svelte.ts

@@ -1,7 +1,7 @@
 import 'iframe-resizer/js/iframeResizer.contentWindow'
 import './style.scss'
 
-import { debug, splitName } from './helper'
+import { debug, splitName } from './helper.js'
 
 export default function init(name: string, source: any) {
   // @ts-ignore

demos/setup/vue.ts

@@ -3,7 +3,7 @@ import './style.scss'
 
 import { createApp } from 'vue'
 
-import { debug, splitName } from './helper'
+import { debug, splitName } from './helper.js'
 
 export default function init(name: string, source: any) {
   // @ts-ignore

demos/src/Examples/CodeBlockLanguage/React/index.jsx

@@ -17,7 +17,7 @@ import html from 'highlight.js/lib/languages/xml'
 import { lowlight } from 'lowlight'
 import React from 'react'
 
-import CodeBlockComponent from './CodeBlockComponent'
+import CodeBlockComponent from './CodeBlockComponent.jsx'
 
 lowlight.registerLanguage('html', html)
 lowlight.registerLanguage('css', css)

demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx

@@ -2,7 +2,7 @@ import './MenuBar.scss'
 
 import React, { Fragment } from 'react'
 
-import MenuItem from './MenuItem'
+import MenuItem from './MenuItem.jsx'
 
 export default ({ editor }) => {
   const items = [

demos/src/Examples/CollaborativeEditing/React/index.jsx

@@ -15,8 +15,8 @@ import React, {
 } from 'react'
 import * as Y from 'yjs'
 
-import { variables } from '../../../variables'
-import MenuBar from './MenuBar'
+import { variables } from '../../../variables.js'
+import MenuBar from './MenuBar.jsx'
 
 const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D']
 const names = [

demos/src/Examples/CollaborativeEditing/Vue/index.vue

@@ -32,7 +32,7 @@ import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import * as Y from 'yjs'
 
-import { variables } from '../../../variables'
+import { variables } from '../../../variables.js'
 import MenuBar from './MenuBar.vue'
 
 const getRandomElement = list => {

demos/src/Examples/Community/React/index.jsx

@@ -8,7 +8,7 @@ import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
 import React from 'react'
 
-import suggestion from './suggestion'
+import suggestion from './suggestion.js'
 
 export default () => {
   const limit = 280

demos/src/Examples/Community/React/suggestion.js

@@ -1,7 +1,7 @@
 import { ReactRenderer } from '@tiptap/react'
 import tippy from 'tippy.js'
 
-import { MentionList } from './MentionList'
+import { MentionList } from './MentionList.jsx'
 
 export default {
   items: ({ query }) => {

demos/src/Examples/Community/Vue/index.vue

@@ -44,7 +44,7 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import suggestion from './suggestion'
+import suggestion from './suggestion.js'
 
 export default {
   components: {

demos/src/Examples/Drawing/Vue/index.vue

@@ -7,7 +7,7 @@ import Document from '@tiptap/extension-document'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import Paper from './Paper'
+import Paper from './Paper.js'
 
 export default {
   components: {

demos/src/Examples/Savvy/React/ColorHighlighter.ts

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core'
 import { Plugin } from '@tiptap/pm/state'
 
-import findColors from './findColors'
+import findColors from './findColors.js'
 
 export const ColorHighlighter = Extension.create({
   name: 'colorHighlighter',

demos/src/Examples/Savvy/React/index.jsx

@@ -8,8 +8,8 @@ import Typography from '@tiptap/extension-typography'
 import { EditorContent, useEditor } from '@tiptap/react'
 import React from 'react'
 
-import { ColorHighlighter } from './ColorHighlighter'
-import { SmilieReplacer } from './SmilieReplacer'
+import { ColorHighlighter } from './ColorHighlighter.ts'
+import { SmilieReplacer } from './SmilieReplacer.ts'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/Savvy/Vue/ColorHighlighter.ts

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core'
 import { Plugin } from '@tiptap/pm/state'
 
-import findColors from './findColors'
+import findColors from './findColors.js'
 
 export const ColorHighlighter = Extension.create({
   name: 'colorHighlighter',

demos/src/Examples/Savvy/Vue/index.vue

@@ -10,8 +10,8 @@ import Text from '@tiptap/extension-text'
 import Typography from '@tiptap/extension-typography'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import { ColorHighlighter } from './ColorHighlighter'
-import { SmilieReplacer } from './SmilieReplacer'
+import { ColorHighlighter } from './ColorHighlighter.ts'
+import { SmilieReplacer } from './SmilieReplacer.ts'
 
 export default {
   components: {

demos/src/Experiments/CollaborationAnnotation/Vue/extension/AnnotationPlugin.ts

@@ -1,7 +1,7 @@
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import * as Y from 'yjs'
 
-import { AnnotationState } from './AnnotationState'
+import { AnnotationState } from './AnnotationState.js'
 
 export const AnnotationPluginKey = new PluginKey('annotation')
 

demos/src/Experiments/CollaborationAnnotation/Vue/extension/AnnotationState.ts

@@ -7,13 +7,13 @@ import {
 } from 'y-prosemirror'
 import * as Y from 'yjs'
 
-import { AnnotationItem } from './AnnotationItem'
-import { AnnotationPluginKey } from './AnnotationPlugin'
+import { AnnotationItem } from './AnnotationItem.js'
+import { AnnotationPluginKey } from './AnnotationPlugin.js'
 import {
   AddAnnotationAction,
   DeleteAnnotationAction,
   UpdateAnnotationAction,
-} from './collaboration-annotation'
+} from './collaboration-annotation.js'
 
 export interface AnnotationStateOptions {
   HTMLAttributes: {

demos/src/Experiments/CollaborationAnnotation/Vue/extension/collaboration-annotation.ts

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core'
 import * as Y from 'yjs'
 
-import { AnnotationPlugin, AnnotationPluginKey } from './AnnotationPlugin'
+import { AnnotationPlugin, AnnotationPluginKey } from './AnnotationPlugin.js'
 
 export interface AddAnnotationAction {
   type: 'addAnnotation',

demos/src/Experiments/CollaborationAnnotation/Vue/extension/index.ts

@@ -1,5 +1,5 @@
-import { CollaborationAnnotation } from './collaboration-annotation'
+import { CollaborationAnnotation } from './collaboration-annotation.js'
 
-export * from './collaboration-annotation'
+export * from './collaboration-annotation.js'
 
 export default CollaborationAnnotation

demos/src/Experiments/CollaborationAnnotation/Vue/index.vue

@@ -41,7 +41,7 @@ import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import * as Y from 'yjs'
 
-import CollaborationAnnotation from './extension'
+import CollaborationAnnotation from './extension/index.ts'
 
 export default {
   components: {

demos/src/Experiments/Commands/Vue/index.vue

@@ -8,8 +8,8 @@
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import Commands from './commands'
-import suggestion from './suggestion'
+import Commands from './commands.js'
+import suggestion from './suggestion.js'
 
 export default {
   components: {

demos/src/Experiments/Embeds/Vue/index.vue

@@ -12,7 +12,7 @@
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import Iframe from './iframe'
+import Iframe from './iframe.ts'
 
 export default {
   components: {

demos/src/Experiments/ExtensionStorage/React/index.jsx

@@ -6,7 +6,7 @@ import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
 import React from 'react'
 
-import { CustomExtension } from './CustomExtension'
+import { CustomExtension } from './CustomExtension.ts'
 
 export default () => {
   const editor = useEditor({

demos/src/Experiments/ExtensionStorage/Vue/index.vue

@@ -9,7 +9,7 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import { CustomExtension } from './CustomExtension'
+import { CustomExtension } from './CustomExtension.ts'
 
 export default {
   components: {

demos/src/Experiments/Figure/Vue/index.vue

@@ -27,7 +27,7 @@ import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import { Figure } from './figure'
+import { Figure } from './figure.ts'
 
 export default {
   components: {

demos/src/Experiments/GenericFigure/Vue/index.vue

@@ -25,8 +25,8 @@ import TableRow from '@tiptap/extension-table-row'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import { Figcaption } from './figcaption'
-import { Figure } from './figure'
+import { Figcaption } from './figcaption.ts'
+import { Figure } from './figure.ts'
 
 const ImageFigure = Figure.extend({
   name: 'capturedImage',

demos/src/Experiments/IsolatingClear/React/index.jsx

@@ -6,7 +6,7 @@ import TextStyle from '@tiptap/extension-text-style'
 import { EditorContent, Node, useEditor } from '@tiptap/react'
 import React from 'react'
 
-import { content } from '../content'
+import { content } from '../content.ts'
 
 const WrapperBlock = Node.create({
   name: 'wrapperBlock',

demos/src/Experiments/Linter/Vue/extension/Linter.ts

@@ -3,7 +3,7 @@ import { Node as ProsemirrorNode } from '@tiptap/pm/model'
 import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
-import LinterPlugin, { Result as Issue } from './LinterPlugin'
+import LinterPlugin, { Result as Issue } from './LinterPlugin.js'
 
 interface IconDivElement extends HTMLDivElement {
   issue?: Issue

demos/src/Experiments/Linter/Vue/extension/index.ts

@@ -1,8 +1,8 @@
-import { Linter } from './Linter'
+import { Linter } from './Linter.js'
 
-export * from './Linter'
+export * from './Linter.js'
 export default Linter
 
-export { BadWords } from './plugins/BadWords'
-export { HeadingLevel } from './plugins/HeadingLevel'
-export { Punctuation } from './plugins/Punctuation'
+export { BadWords } from './plugins/BadWords.js'
+export { HeadingLevel } from './plugins/HeadingLevel.js'
+export { Punctuation } from './plugins/Punctuation.js'

demos/src/Experiments/Linter/Vue/extension/plugins/BadWords.ts

@@ -1,4 +1,4 @@
-import LinterPlugin from '../LinterPlugin'
+import LinterPlugin from '../LinterPlugin.js'
 
 export class BadWords extends LinterPlugin {
 

demos/src/Experiments/Linter/Vue/extension/plugins/HeadingLevel.ts

@@ -1,6 +1,6 @@
 import { EditorView } from '@tiptap/pm/view'
 
-import LinterPlugin, { Result as Issue } from '../LinterPlugin'
+import LinterPlugin, { Result as Issue } from '../LinterPlugin.js'
 
 export class HeadingLevel extends LinterPlugin {
   fixHeader(level: number) {

demos/src/Experiments/Linter/Vue/extension/plugins/Punctuation.ts

@@ -1,6 +1,6 @@
 import { EditorView } from '@tiptap/pm/view'
 
-import LinterPlugin, { Result as Issue } from '../LinterPlugin'
+import LinterPlugin, { Result as Issue } from '../LinterPlugin.js'
 
 export class Punctuation extends LinterPlugin {
   public regex = / ([,.!?:]) ?/g

demos/src/Experiments/Linter/Vue/index.vue

@@ -11,7 +11,7 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import Linter, { BadWords, HeadingLevel, Punctuation } from './extension'
+import Linter, { BadWords, HeadingLevel, Punctuation } from './extension/index.ts'
 
 export default {
   components: {

demos/src/Experiments/TrailingNode/Vue/index.vue

@@ -8,7 +8,7 @@
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import { TrailingNode } from './trailing-node'
+import { TrailingNode } from './trailing-node.ts'
 
 export default {
   components: {

demos/src/Nodes/Mention/React/index.jsx

@@ -5,7 +5,7 @@ import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 
-import suggestion from './suggestion'
+import suggestion from './suggestion.js'
 
 export default () => {
   const editor = useEditor({

demos/src/Nodes/Mention/Vue/index.vue

@@ -9,7 +9,7 @@ import Mention from '@tiptap/extension-mention'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
-import suggestion from './suggestion'
+import suggestion from './suggestion.js'
 
 export default {
   components: {

packages/core/src/CommandManager.ts

@@ -1,10 +1,10 @@
 import { EditorState, Transaction } from '@tiptap/pm/state'
 
-import { Editor } from './Editor'
-import { createChainableState } from './helpers/createChainableState'
+import { Editor } from './Editor.js'
+import { createChainableState } from './helpers/createChainableState.js'
 import {
   AnyCommands, CanCommands, ChainedCommands, CommandProps, SingleCommands,
-} from './types'
+} from './types.js'
 
 export class CommandManager {
   editor: Editor