marktion

中文 / anglais

Présentation de Marktion

Marktion est un éditeur de Markdown Wysiwyg basé sur Prochemirror, dédié à l'amélioration de l'expérience d'édition de Markdown.

Voir notre site Web Marktion.io en action.

Caractéristiques

• [Nouveau] Intégration AI : interface de conversation AI intégrée, prise en charge des extensions de plugin AI, invoquée au début d'une ligne en appuyant sur l'espace;

• Édition WYSIWYG : Aperçu en temps réel des résultats de rendu de Markdown, offrant une expérience d'édition intuitive, et vous pouvez basculer entre le mode de code source et le mode d'édition WYSIWYG avec Ctrl + /;

• Menu Slash Menu et bulles : Inspiré rapidement par l'éditeur de la notion Utilisation /; Prise en charge du mode sombre: prise en charge d'allumer ou de désactiver le mode sombre.

• Prise en charge du mode sombre : Activez le mode sombre pour offrir une expérience d'édition visuellement confortable dans des environnements à faible luminosité.

Installation et utilisation

1. Installez les dépendances.

npm intall marktion

2. Usage

 import { ReactEditor } from 'marktion' ;
import 'marktion/dist/style.css' ;

function Editor ( ) {
  return < ReactEditor content = { `# Hello World` } /> ;
}

3. Exemple

Jetez un œil aux exemples pour voir Marktion.io en action.

API

Réagiterprops

Propriété	Description	Taper	Défaut
contenu	Le contenu initial Markdown pour l'éditeur.	chaîne	-
sombre	Activer ou désactiver le mode sombre dans l'éditeur.	booléen	FAUX
uploadOptions.uploader	Fonction de rappel pour le téléchargement d'images.	(file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url>	-
rendre	mode rendu	WYSIWYG | SOURCE
floconneux	Rappel de changement de contenu de l'éditeur	(editor: Marktion) => void

Consultez la documentation de TipTap pour trouver plus d'API.

Marktionref

Propriété	Description	Taper	Défaut
éditeur	instance de marque	Marque	-

Exemple d'utilisation:

 import { ReactEditor , ReactEditorRef } from 'marktion' ;

function App ( ) {
  const editorRef = useRef < ReactEditorRef > ( null ) ;

  const onExport = ( ) => {
    const content = editorRef . current ?. editor . getContent ( ) ;
    console . log ( content ) ;
  } ;

  return (
    < >
      < button onClick = { onExport } > export </ button >
      < ReactEditor ref = { editorRef } />
    </ >
  ) ;
} 

Plugins

Plugin IA

Le plugin AI est basé sur Vercel AI. Avant de commencer, vous devez créer un routeur AI. Veuillez vous référer à la documentation pour plus d'informations: le démarrage.

Exemple d'utilisation:

 function Editor ( ) {
  const ai = useAI ( {
    basePath : import . meta . env . VITE_OPENAI_BASE_URL
  } ) ;

  return (
    < ReactEditor ref = { editorRef } plugins = { [ ai . plugin ] } >
      { ai . element }
    </ ReactEditor / >
  )
} 

Contributif

Merci d'avoir envisagé de contribuer à Marktion! Si vous souhaitez contribuer, veuillez suivre ces étapes:

1. Fourk le référentiel sur votre compte GitHub.

2. Clone le référentiel à fourche vers votre machine locale.

git clone https://github.com/yourusername/marktion.git
cd marktion

3. Installez les dépendances.

pnpm i

4. Apporter des modifications et tester vos modifications.

5. Engagez vos modifications.

6. Créez une demande de traction.

Accédez au référentiel d'origine et cliquez sur "New Pull Demande". Remplissez les détails nécessaires et décrivez les modifications que vous avez apportées.

Nous examinerons votre demande de traction dès que possible. Merci pour votre contribution!

Licence

Ce projet est autorisé sous la licence du MIT. Voir le fichier de licence pour plus de détails.

Contact

Si vous avez des questions, des suggestions ou des problèmes, n'hésitez pas à nous contacter à travers les canaux suivants:

• Courriel: [email protected]

• Tracker des problèmes: problèmes de projet (veuillez spécifier le type de problème dans le titre du problème)