من یک افزونه برای اضافه کردن توابع مرتب سازی، جستجو و صفحه بندی به جداول Markdown در GROWI ایجاد کردم.

Summarize this content to 400 words in Persian Lang
GROWI یک پلتفرم ویکی منبع باز است که یک سیستم پلاگین را ارائه می دهد و به کاربران امکان می دهد داده های خود را به طور موثر نمایش داده و سفارشی کنند.

در این مقاله افزونه Table Grid که برای GROWI توسعه یافته را معرفی می کنیم. این افزونه Grid.js را برای جداول نوشته شده در Markdown اعمال می کند و قابلیت هایی مانند مرتب سازی، جستجو و صفحه بندی را اضافه می کند.

افزودن پلاگین

برای استفاده از این افزونه به آدرس زیر بروید Plugins بخش در پنل مدیریت GROWI و URL زیر را اضافه کنید: https://github.com/goofmint/growi-plugin-table-grid.

استفاده

در ویرایشگر، یک جدول با استفاده از نحو استاندارد Markdown بنویسید:

| Header1 | Header2 | Header3 |
| ——- | ——- | ——- |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از پیش نمایش، جدول با Grid.js بهبود می یابد و ویژگی های پیشرفته ای را ارائه می دهد.

نکات مهم

ردیف های خالی: در صورت وجود سطرهای خالی، ممکن است افزونه جداول را به درستی ارائه نکند.

به روز رسانی در زمان واقعی: تغییرات داده ها ممکن است فوراً منعکس نشود. برای به روز رسانی، یک خط خالی (که باعث خطا می شود) وارد کنید و سپس داده های صحیح را دوباره وارد کنید.

درباره کد

این افزونه با table با استفاده از سیستم پلاگین GROWI تگ کنید و به عنوان یک پلاگین Rehype پیاده سازی شده است.

const activate = (): void => {
if (growiFacade == null || growiFacade.markdownRenderer == null) {
return;
}

const { optionsGenerators } = growiFacade.markdownRenderer;

// For page view
optionsGenerators.customGenerateViewOptions = (…args) => {
const options = optionsGenerators.generateViewOptions(…args);
options.rehypePlugins.push(plugin as any); // Add plugin
return options;
};

// For preview
optionsGenerators.customGeneratePreviewOptions = (…args) => {
const preview = optionsGenerators.generatePreviewOptions(…args);
preview.rehypePlugins.push(plugin as any); // Add plugin
return preview;
};
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پلاگین را پردازش می کند table برچسب، استخراج thead و tbody برای تبدیل آنها به قالبی سازگار با Grid.js.

export const plugin: Plugin = function() {
return (tree) => {
visit(tree, (node) => {
const n = node as unknown as GrowiNode;
try {
// Ignore non-table tags
if (n.type !== ‘element’ || n.tagName !== ‘table’) {
return;
}
// Implementation here
}
catch (e) {
n.type = ‘html’;
n.value = `Error: ${(e as Error).message}`;
}
});
};
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این تبدیل شامل نگاشت سرصفحه ها و داده های جدول به ساختار Grid.js است:

const [thead, tbody] = n.children;
const columns = thead.children[0].children.map(c => c.children[0].value);
// Results in [“Header1”, “Header2”, “Header3”] const data = tbody.children.map(row => row.children
.map(cell => cell.children[0].value));
// Results in [[“1”, “2”, “3”], [“4”, “5”, “6”], [“7”, “8”, “9”]]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس اینها با گزینه‌های مختلف روی Grid.js اعمال می‌شوند که با تم GROWI مطابقت دارند:

const grid = new Grid({
columns, // Headers
data, // Data
pagination: true, // Pagination
search: true, // Search
sort: true, // Sorting
resizable: true, // Column resizing
// Styling
style: {
table: {
border: ‘2px solid var(–bs-secondary-bg)’,
},
th: {
color: ‘var(–bs-body-color)’,
backgroundColor: ‘var(–bs-body-bg)’,
},
td: {
color: ‘var(–bs-body-color)’,
backgroundColor: ‘var(–bs-body-bg)’,
},
footer: {
backgroundColor: ‘var(–bs-secondary-bg)’,
},
},
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از آنجایی که DOM فوراً به‌روزرسانی نمی‌شود، افزونه قبل از رندر کردن با Grid.js منتظر می‌ماند تا DOM آماده شود:

// Unique class for identification
const className = `table-grid-${Math.random().toString(36).slice(2)}`;
n.properties.className = `${n.properties.className} ${className}`;
// Wait for DOM to be ready
const id = setInterval(() => {
const el = document.querySelector(`.${className}`);
if (el) {
clearInterval(id);
el.innerHTML = ”; // Clear existing HTML
grid.render(el); // Render with Grid.js
}
}, 1000);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ملاحظات استایل

GROWI از چندین تم، از جمله حالت های تاریک و روشن پشتیبانی می کند. برای اطمینان از سازگاری، افزونه از متغیرهای CSS استفاده می کند. به عنوان مثال، نمادهای مرتب سازی ممکن است با پس زمینه در حالت تاریک ترکیب شوند. اعمال یک فیلتر CSS رنگ آنها را معکوس می کند:

@media (prefers-color-scheme: dark) {
.gridjs-sort {
filter: invert(100%);
}
}

.gridjs-input {
color: var(–bs-body-color) !important;
background-color: var(–bs-body-bg) !important;
}

.gridjs-pages button {
color: var(–bs-body-color) !important;
background-color: var(–bs-body-bg) !important;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

سیستم پلاگین GROWI امکان سفارشی سازی گسترده ویژگی های نمایش آن را فراهم می کند. اگر متوجه شدید که هیچ عملکردی کم است، توسعه و اضافه کردن خود را در نظر بگیرید

| Header1 | Header2 | Header3 |
| ------- | ------- | ------- |
| 1       | 2       | 3       |
| 4       | 5       | 6       |
| 7       | 8       | 9       |

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }

  const { optionsGenerators } = growiFacade.markdownRenderer;

  // For page view
  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = optionsGenerators.generateViewOptions(...args);
    options.rehypePlugins.push(plugin as any); // Add plugin
    return options;
  };

  // For preview
  optionsGenerators.customGeneratePreviewOptions = (...args) => {
    const preview = optionsGenerators.generatePreviewOptions(...args);
    preview.rehypePlugins.push(plugin as any); // Add plugin
    return preview;
  };
};

export const plugin: Plugin = function() {
  return (tree) => {
    visit(tree, (node) => {
      const n = node as unknown as GrowiNode;
      try {
        // Ignore non-table tags
        if (n.type !== 'element' || n.tagName !== 'table') {
          return;
        }
        // Implementation here
      }
      catch (e) {
        n.type = 'html';
        n.value = `
Error: ${(e as Error).message}
`;
      }
    });
  };
};

const [thead, tbody] = n.children;
const columns = thead.children[0].children.map(c => c.children[0].value);
// Results in ["Header1", "Header2", "Header3"]
const data = tbody.children.map(row => row.children
  .map(cell => cell.children[0].value));
// Results in [["1", "2", "3"], ["4", "5", "6"], ["7", "8", "9"]]

const grid = new Grid({
  columns,            // Headers
  data,               // Data
  pagination: true,   // Pagination
  search: true,       // Search
  sort: true,         // Sorting
  resizable: true,    // Column resizing
  // Styling
  style: {
    table: {
      border: '2px solid var(--bs-secondary-bg)',
    },
    th: {
      color: 'var(--bs-body-color)',
      backgroundColor: 'var(--bs-body-bg)',
    },
    td: {
      color: 'var(--bs-body-color)',
      backgroundColor: 'var(--bs-body-bg)',
    },
    footer: {
      backgroundColor: 'var(--bs-secondary-bg)',
    },
  },
});

// Unique class for identification
const className = `table-grid-${Math.random().toString(36).slice(2)}`;
n.properties.className = `${n.properties.className} ${className}`;
// Wait for DOM to be ready
const id = setInterval(() => {
  const el = document.querySelector(`.${className}`);
  if (el) {
    clearInterval(id);
    el.innerHTML = ''; // Clear existing HTML
    grid.render(el);   // Render with Grid.js
  }
}, 1000);

@media (prefers-color-scheme: dark) {
  .gridjs-sort {
    filter: invert(100%);
  }
}

.gridjs-input {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

.gridjs-pages button {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}