Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#641 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
25/100
issue の種類
ドキュメント
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
react, typescript
領域
developer-experience, documentation

調査の方向性

Issue にある InputWithFields の例とその handleTextChange ロジックから始めます。Repository のファイルもテストも特定されていません。CodeMirror/RangeSet の統合例をどこに置くべきかを判断し、そのうえで、このオブジェクトの配列というユースケースをどのように扱うべきか、また更新が成功した場合に何を生成すべきかを文書化します。

索引モデルが issue の本文から書いたものです。

説明

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"
    />
  );
};
主要言語
TypeScript
スター
2.3k
フォーク
162
平均マージ
2時間 41分
マージ済み PR（30日）
1

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

uiwjs/react-codemirror のほかの issue

uiwjs/react-codemirror の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。