Marktion WYSIWYG Markdown Editor

For a more structured approach, use useDispatch to retrieve the dispatch function and useContextSelector to subscribe to specific parts of your context state. This allows components to re-render only when the selected slice of state changes.

1. Define a state class.
2. Create a context with an initial instance of that class.
3. Use useDispatch to trigger updates via produce-style functions.
4. Use useContextSelector with a selector function to extract specific values.
5. Wrap your application in the context provider (which can be used as a component directly).

class AppState {
  style = {
    theme: 'light',
    primary: 'tomato'
  };
}

const AppStateContext = createContext(new AppState());

const setDarkMode = produce(draft => {
  draft.style.theme = 'dark';
});

const getThemeMode = (state: AppState) => {
  return state.style.theme;
};

function App() {
  const dispatch = useDispatch();
  const theme = useContextSelector(getThemeMode);

  const onToggle = () => {
    dispatch(setDarkMode);
  };

  return (
    <div>
      theme: {theme}
      <button onClick={onToggle}>Toggle Mode</button>
    </div>
  );
}

render(
  <AppStateContext>
    <App />
  </AppStateContext>,
  rootEl
);

The use-channel hook provides a mechanism for components to communicate via a shared channel. You can create a typed channel using createChannel<T>() and then consume it in components using the useChannel(channel) hook.

To send data through a channel, call channel.message(data). To access the history of messages sent through the channel, use channel.messages(), which returns an array of the messages received.

// 1. Define a typed channel
export const EditArticleChannel = createChannel<Article[]>();

// 2. Consume the channel in a component to listen for messages
function Editor() {
  const channel = useChannel(EditArticleChannel);

  useEffect(() => {
    // Get the latest message from the channel
    const followArticle = channel.messages().pop();
    if (followArticle) {
      // Handle the new message
    }
  }, [channel]);

  // 3. Send a message through the channel
  const sendMessage = (data: Article[]) => {
    channel.message(data);
  };
}

// 4. Send a message from a different component
function ArticleList() {
  const channel = useChannel(EditArticleChannel);

  const onEditItem = (item: Article[]) => {
    channel.message(item);
  };
}

For production applications, it is recommended to enable type-aware lint rules in your ESLint configuration. This requires configuring parserOptions to point to your TypeScript configuration files and switching to type-checked plugin presets.

Steps to enable type-aware linting:

1. Update parserOptions in your ESLint config to include project and tsconfigRootDir.
2. Replace standard TypeScript ESLint plugins with type-checked versions.
3. (Optional) Add stylistic type-checked rules.
4. (Optional) Add eslint-plugin-react for React-specific linting.

// 1. Configure parserOptions
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: ['./tsconfig.json', './tsconfig.node.json'],
  tsconfigRootDir: __dirname,
},

// 2. Update extends list (example logic)
// Replace 'plugin:@typescript-eslint/recommended'
// With 'plugin:@typescript-eslint/recommended-type-checked' 
// or 'plugin:@typescript-eslint/strict-type-checked'

// 3. Optionally add:
// 'plugin:@typescript-eslint/stylistic-type-checked'

// 4. Add React plugins (requires eslint-plugin-react):
// 'plugin:react/recommended'
// 'plugin:react/jsx-runtime'