Хотя… не изобрел, а собрал. Я собрал свой MVP Simple Data Editor, так как хотел простое и миниатюрное решение, работающее везде, где есть браузер и чтобы при этом не происходило никаких обращений во вне. Но не только. Основная идея в реализации возможности представления одной и той же информации, но в разных форматах: текстовом, табличном ну а в перспективе и в графическом.

Описание

Постановка задачи была простой: загрузка одного или нескольких csv‑файлов (при выборе нескольких файлов происходит склейка содержимого), отображение содержимого как в текстовом виде, так и в табличной форме. Возможность простого редактирования и сохранения.

Проект написан на Javascript/Typescript на базе фреймворка Vue.js. В качестве редактора текста был выбран MonacoEditor, думаю большинству из Вас он знаком по VSCode. Достаточно нажать «F1» на вкладке чтобы увидеть знакомое меню.

В качестве компонента для табличного представления использовал HandsOnTable.

В части кода оба представления разнесены по отдельным файлам. Отдельная логика также вынесена в файлы в папке./libs

Особенности

Ньюансы связаны со спецификой работы браузеров. Вы можете через браузер открыть локальный файл, но сохранить изменения в него же — нет.

Поэтому:

1. При редактировании данных в текстовом виде — отредактированный текст сохранятся в local storage браузера. И если вы, к примеру, обновляете страницу — то на экране отобразится уже не содержимое файлов, а отредактированный текст.

2. Сохранение файла. Здесь сохранение == загрузка нового файла.

Установка

Вот код проекта на ГитХаб

git clone https://github.com/BazDen/SimpleDataEditor.git
pnpm install
pnpm dev
pnpm build

Использование ИИ

Использую, но в части подготовки отдельных участков кода, в частности в данном проекте ныне суверенная ИИ с приятным женским именем помогла мне подготовить функции чтения одного/нескольких файлов.

Ограничения

Обращаю ваше внимание — это MVP — минимальный жизнеспособный продукт. В этой ситуации проще описывать не ограничения, а функционал, что я собственно и сделал выше. Но есть неявные ограничения, которые важно знать тем отважным энтузиастам, кто возьмет мой код для своих проектов

1. В табличной части ограниченное количество колонок, только от A до Z

2. Редактируемая информация в текстовом виде хранится в local storage браузера, у которого есть свои ограничения на размер

3. При загрузке csv файла, только символ «;» является разделителем.

Дальнейшее развитие

Планирую развивать данный MVP в первую очередь как общедоступный шаблон для других проектов. Не испытываю иллюзий в части того, что в части редактирования текста/таблиц данное решение будет лучше существующих текстовых или табличных редакторов. Поэтому шаблон, который будет дорабатываться по мере сил и наличию свободного времени.