Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

How do you map changes between a CodeMirror component and an array of objects?

Ouverte
  • Quelque chose ne va pas ?
#641 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
25/100
Type d'issue
Documentation
Clarté
À clarifier
Activité
À l'abandon
Stack technique
react, typescript
Domaine
developer-experience, documentation

Piste de recherche

Commencez par l’exemple InputWithFields et sa logique handleTextChange dans l’issue ; aucun fichier du dépôt ni aucun test n’est indiqué. Déterminez où placer un exemple d’intégration de CodeMirror/RangeSet, puis documentez comment ce cas d’utilisation avec un tableau d’objets doit être géré et ce que les mises à jour réussies doivent produire.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

I have an array of objects that are represented in a CodeMirror component. I'm trying to work out how to map changes in the CodeMirror to the object. I'm using a RangeSet to hold the underlying object. I was expecting I could use RangeSet.map() to apply the changes from the CodeMirror onto the object RangeSet. I'm not seeing that happen.

Is there an example that can help me understand how to handle this use case in a good way?

type Text = { type: "text"; textValue: string };
type Field = {
  type: "field";
  textValue: string;
  field: {
    fieldId: string;
  };
};
export type TextWithField = (Text | Field)[];


class TextOrFieldRange extends RangeValue {
  type: "text" | "field";
  textOrField: Text | Field;
  theRange;
  constructor(
    from: number,
    to: number,
    type: "text" | "field",
    textOrField: Text | Field
  ) {
    super();
    this.type = type;
    this.textOrField = { ...textOrField };
    this.theRange = this.range(from, to);
  }

  eq(other: RangeValue): boolean {
    return (
      other instanceof TextOrFieldRange &&
      this.type === other.type &&
      this.theRange.from === other.theRange.from &&
      this.theRange.to === other.theRange.to
    );
  }
}

const InputWithFields = ({
  textWithFields,
  setTextWithFields,
}: {
  textWithFields: TextWithField;
  setTextWithFields: (textWithFields: TextWithField) => void;
}) => {
  const rangeBuilder = new RangeSetBuilder<TextOrFieldRange>();
  let combinedText = "";
  const fieldRanges: [number, number][] = [];

  textWithFields.forEach((item) => {
    const start = combinedText.length;
    combinedText += item.textValue;
    const end = combinedText.length;
    rangeBuilder.add(
      start,
      end,
      new TextOrFieldRange(start, combinedText.length, item.type, item)
    );
    item.type == "field" && fieldRanges.push([start, end]);
  });
  const combinedRanges = rangeBuilder.finish();

  const handleTextChange = (value: string, viewUpdate: ViewUpdate) => {
    const newRanges = combinedRanges.map(viewUpdate.changes.desc);
    const iterator = newRanges.iter();
    const newTextWithFields: TextWithField = [];
    while (iterator.value !== null) {
      newTextWithFields.push(iterator.value.textOrField);
      iterator.next();
    }
    setTextWithFields(newTextWithFields);
  };

  const highlightRanges = rangeHighlighter(fieldRanges);

  return (
    <CodeMirror
      value={combinedText}
      onChange={handleTextChange}
      theme="none"
      basicSetup={false}
      editable={true}
      extensions={[...extensions, highlightRanges]}
      maxWidth="100%"
      height="100px"
    />
  );
};
Langage dominant
TypeScript
Étoiles
2.3k
Forks
162
Merge moyen
2 h 41 min
PR mergées (30 j)
1

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de uiwjs/react-codemirror

Toutes les issues de uiwjs/react-codemirror

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.