Example improvements

Problem All typescript examples have compile errors with the richtext having over 30+ errors. Also each example should be a standalone file. It shouldn't have any reference files outside examples.

Solution Fix them. I don't want to sound rude, but examples pages are used for quick prototyping, it needs to work. I know this package is in it's early stages, but that still no reason for merging code that just doesn't compile.

What errors are you seeing? The examples compile and work (they are running on https://www.slatejs.org/ and get re-deployed on every merge and there are e2e tests ensuring that they work).

My best guess is that you missed https://docs.slatejs.org/concepts/12-typescript when setting up your project

I feel it should be easier to setup something if you're evaluating options of or if you just want to try things out. The typescript section is towards the end of the documentation :(

Copy pasting/pasting the examples should just work. I wanted to try out the rich one, but was stuck right away because it uses external dependencies (is-hotkey, slate-history) and also references other files which are not available by default (../components) :/

I can confirm nothing seems to work with https://github.com/ianstormtaylor/slate/blob/main/site/examples/richtext.tsx I get a lot of TS errors as nothing is typed, and being completely new to Slate it's quite challenging working out what everything should be. I do have the TS types and module from the shared concepts link but it's still freaking out.

I agree. You cannot say that they all compile:

const isMarkActive = (editor, format) => {
    const marks = Editor.marks(editor)
    return marks ? marks[format] === true : false
}

editor and format implicitly has an 'any' type. marks[format] Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Omit<BaseText, "text">'

https://github.com/ianstormtaylor/slate/blob/main/site/examples/richtext.tsx

I think you should review your tsconfig. The examples are not true TS, they are JS written in tsx files. Try to add "allowJs": false, and "strict": true. I am used to use the following config:

  "compilerOptions": {
    "allowJs": false,
    "allowUnreachableCode": false,
    "esModuleInterop": true,
    "target": "ES2021",
    "module": "commonjs",
    "jsx": "react-jsx",
    "sourceMap": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

Hi! Brand new here, awesome package, hoping to get this example working. I can confirm I am also getting these compile errors on the richtext example, they are mostly TS7006: Parameter has an implicit any type because none of the arguments to functions in the examples are typed. My tsconfig is set using strict: true, which sets the TS compiler to have maximum strictness. Some are also TS7053, because arbitrary untyped strings are used to access objects, and a smattering of others.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],  
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },  
  "include": [
    "src"
  ]
} 

I agree. You cannot say that they all compile:

const isMarkActive = (editor, format) => {
    const marks = Editor.marks(editor)
    return marks ? marks[format] === true : false
}

editor and format implicitly has an 'any' type. marks[format] Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Omit<BaseText, "text">'

https://github.com/ianstormtaylor/slate/blob/main/site/examples/richtext.tsx

I think you should review your tsconfig. The examples are not true TS, they are JS written in tsx files. Try to add "allowJs": false, and "strict": true. I am used to use the following config:

  "compilerOptions": {
    "allowJs": false,
    "allowUnreachableCode": false,
    "esModuleInterop": true,
    "target": "ES2021",
    "module": "commonjs",
    "jsx": "react-jsx",
    "sourceMap": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

It's still not working