pcbowers/sanity-plugin-tags

A multi-tag input for sanity studio.

Hi 👋, I'm Chris Bowers

Want to reach out? Connect with me at [email protected]!

sanity-plugin-tags's Issues

Issue when clearing selected option with type 'tag'

const tempTag: GeneralTag = { ...tag, label: tag._label_temp, value: tag._value_temp, }

I am using sanity-plugin-tags and implement a dropdown with isClearable : true in my schema , problem is that when I am clearing the dropdown sanity studio notify some error

Styled-components v6.x needed for Studio v3.36.x to run

Hi.
With new Studio v3.36.x there is no more option to run this plugin with Styled Components v5.x. The studio just won't start. Here is the explanation from the latest release:

If you encounter an error such as TypeError: Cannot read properties of undefined (reading 'div'), please make sure your Studio doesn't depend on styled-components@5. Updating any such dependencies to styled-components@6 should resolve the error.
This error is caused by an ESM/CJS compability issue in @sanity/ui.

Is there a chance we could see the update for this plugin addressing this issue?

Cheers.

Sanity page says this only works in Studio v2

The Sanity plugin page has a warning saying this plugin only works in v2: https://www.sanity.io/plugins/tags

What a relief to know that's not true! But I spent a little while fretting and searching for alternatives.

@pcbowers could you update the plugin page when you get a chance?

Improve Documentation

Currently, all documentation is found within the README. Ideally, a GitHub pages website or something similar would be created to provide better docs for this plugin.

Option to delete/edit tags

Hello, it would be nice to have an option to edit tags after they are added to the collection as well as delete them from the collection. Is there any way to do it currently?

Thank you!

Filter document by tags using GraphQL

I can't see this field in the Filter options when using GraphQL. Is there something I am missing or is the field just not supported in GraphQL?

Bump to Sanity Studio v3

It would be great to see this plugin be compatible with Sanity Studio v3

Background clipping through dropdown list

Hi!
It seems like when you move the mouse away from the input field in Sanity studio the background turns transparent, or the underlying text clips through.

Screen.Recording.2022-07-01.at.10.55.09.mov

Is there support?

Hi there,

I am trying to add this to a project of mine and pull in tags from a document on my blog page.

I have followed the instructions and referenced my tags document but no tags are pulling through.

Is there any default tag document example you can provide?

Thanks,
Jack

Compiling Failed

I installed the plugin using the command sanity install tags and when I try to start the project, I received this problem.

$ sanity start
✔ Checking configuration files...
⠸ Compiling...webpack built 380c2db10379be37151f in 12011ms
✔ Compiling...
Failed to compile.

Error in ./node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js
Module parse failed: Unexpected token (306:11)
You may need an appropriate loader to handle this file type.
|   }
| 
|   return { ...rect,
|     x: rect.x - scroll.scrollLeft + offsets.x,
|     y: rect.y - scroll.scrollTop + offsets.y
 @ ./node_modules/react-select/dist/react-select.esm.js 23:0-26
 @ ./node_modules/sanity-plugin-tags/lib/components/Input.js (part:tags/components/input)
 @ ./node_modules/sanity-plugin-tags/lib/schemas/tags.js
 @ ./node_modules/sanity-plugin-tags/lib/schemas/tags.js (all:part:@sanity/base/schema-type)
 @ ./schemas/schema.js (part:@sanity/base/schema)
 @ ./node_modules/@sanity/default-layout/lib/schemaErrors/SchemaErrorReporter.js
 @ ./node_modules/@sanity/default-layout/lib/defaultLayout/DefaultLayout.js
 @ ./node_modules/@sanity/default-layout/lib/defaultLayout/index.js
 @ ./node_modules/@sanity/default-layout/lib/Root.js (part:@sanity/base/root)
 @ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
 @ ./node_modules/@sanity/server/lib/browser/entry-dev.js
 @ multi ./node_modules/@sanity/server/lib/browser/entry-dev.js

Tags in List Previews

Hi.

As a Sanity newbie, I'd like to know if is there a way to use Tags as a Subtitle field in List Previews. As I understand the preview.select.subtitle field cannot be an array.

Thank you for your time and effort in putting this plugin together, I don't understand how this is not a core feature of Sanity.

Plugin causes error when deploying graphql playground

Having this plugin installed will cause the following error when running the CLI command sanity graphql deploy:

/path to project/node_modules/sanity-plugin-tags/lib/schemas/tags.js:1
import t from"part:tags/components/input";const e={name:"tags",title:"Tags",type:"array",inputComponent:t,of:[{type:"tag"}]};export{e as default};
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

This seems to be the same issue mentioned in this thread on the Sanity Exchange, which ultimately appears to have been solved in this pull request to the original plugin repo.

Upgrade to sanity/client@3

Library looks great!

Get peer dependency conflict when using @sanity/client@3.*

Dark mode support

Hey, quick one.

Unless I am missing something obvious, it looks like there is no dark mode support by default?

Error when adding module

Hi there,

I'm trying to add this module, but I get the following error when starting sanity

Error in ./node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js
Module parse failed: Unexpected token (394:6)
You may need an appropriate loader to handle this file type.
|   } else {
|     const mutableRect = {
|       ...clippingAncestor
|     };
|     if (isClientRectVisualViewportBased()) {
 @ ./node_modules/react-select/dist/react-select.esm.js 24:0-26
 @ ./node_modules/sanity-plugin-tags/lib/components/Input.js (part:tags/components/input)
 @ ./node_modules/sanity-plugin-tags/lib/schemas/tag.js
 @ ./node_modules/sanity-plugin-autocomplete-tags/build/schema/tagSchema.js (all:part:@sanity/base/schema-type)
 @ ./schemas/schema.js (part:@sanity/base/schema)
 @ ./node_modules/@sanity/default-layout/lib/schemaErrors/SchemaErrorReporter.js
 @ ./node_modules/@sanity/default-layout/lib/defaultLayout/DefaultLayout.js
 @ ./node_modules/@sanity/default-layout/lib/defaultLayout/index.js
 @ ./node_modules/@sanity/default-layout/lib/Root.js (part:@sanity/base/root)
 @ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
 @ ./node_modules/@sanity/server/lib/browser/entry-dev.js
 @ multi ./node_modules/@sanity/server/lib/browser/entry-dev.js

Unable to run studio in production on vercel, but works locally

Using the latest version of this plugin with this template https://github.com/mariuslundgard/sanity-template-nextjs.

I can use the embedded studio locally, but when I deploy to Vercel I get a vague application error.

Was confused as to why it only occurred on production, and after trial and error I figured out that removing tags from sanity config allowed sanity to load.

I wonder if anyone else has encountered this issue. I will try and use a fresh sanity project to see if it still occurs.

On Create Bug

Currently, there is no check to make sure whether or not the create option is valid. Every once in a while, this causes a bug where the value is not distinct but the label is. Ideally, isValidNewOption from react select would be used to support this by checking it against current options.

Keep the Tag input active after creating new tag

Its obvious that we use tags to add multiple items, but this plugins removes focus after creating new tag. I guess the plugin should keep the focus in the input so we can add multiple items without using cursor for every tag.

Here's a gif showing the issue:

Use value from other fields as params in "predefinedTags" fetch

In a regular array field, you can use the value of other fields in the document as params to your request. E.g.,

{
      name: 'tags',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [{type: 'tag'}],
          weak: true,
          options: {
            filter: ({document}) => {
              return {
                filter: '$section == appliesTo._ref',
                params: {
                  section: document.section?._ref,
                },
              }
            },
          },
        },
      ],
    },

Ideally, with this plugin and a query in the predefinedTags option, you would be able to grab the ({ document }) to use values as params. E.g.,

{
      name: 'tags',
      type: 'tags',
      options: {
        predefinedTags: async ({document}) => await client.fetch(`*[_type == "tagRef" && $section == appliesTo._ref ]{label, value}`, { section: document.section._ref })
        },
      },
    },

Is this possible?

includeFromRelated / getTagsFromRelated within Object

Hi,
I'm using a localization approach very similar to this: https://www.sanity.io/docs/localization

As a result my tags are part of an object, that will output like this:

    "de": [
      {
        "label": "Test DE",
        "value": "Test DE"
      }
    ],
    "en": [
      {
        "label": "Test EN",
        "value": "Test EN"
      }
    ]
  }

Is there any way to make "includeFromRelated" work in this case?

Possibly by allowing for a custom query instead of a string?
(Bypassing or extending getTagsFromRelated() maybe?)

Thanks!

Required rule not working

Hi.

First, let me thank you for this plugin.

I'm successfully running it on my Sanity Studio v3.21.3 except for my standard validation rule, validation: (Rule) => Rule.required(), which does nothing. I can leave it to Select... and publish it without any notice or error in the console.

Am I doing something wrong with this plugin? I'm not hugely experienced with the Sanity CMS.

Thank you for your time and effort.

Dropdown can be displayed behind of another filed in the row

I'm playing with this plugin. And I found 2 problems:

1. When having tag field and field with the rich text editor I'm getting to the problem that tag dropdown can be displayed behind of rich text editor. The user experience when interacting with tag field isn't great in this situation. Is it possible to fix styling of dropdown?
   

2. When having tag field in my schema of some document, it seems that changes aren't highlighted. Changes are highlighted for all other fields in my document excepts fields with type="tags".
   

Is it possible to fix these problems? Thank you.

Sanity v3 Internal server error: Failed to resolve import "sanity-plugin-tags" from "sanity.config.js". Does the file exist?

Hi! I am trying to add this plugin to a v3 project, but I get an import error:

Internal server error: Failed to resolve import "sanity-plugin-tags" from "sanity.config.js". Does the file exist?

In my sanity.config.js file I am importing import {tags} from 'sanity-plugin-tags'

I also tried justimport {tags} from 'tags' as that matches the name of the plugin in package.json but I get this error:

Internal server error: Failed to resolve entry for package "tags". The package may have incorrect main/module/exports specified in its package.json.

here is my package.json:

{
  "name": "gramafilm",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/color-input": "^3.0.2",
    "@sanity/vision": "^3.0.0",
    "get-youtube-id": "^1.0.1",
    "pluralize": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-is": "^18.2.0",
    "react-youtube": "^10.0.0",
    "sanity": "^3.0.0",
    "styled-components": "^5.2.0",
    "tags": "^2.0.10"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^2.0.1",
    "@types/react": "^18.0.25",
    "@types/styled-components": "^5.1.26",
    "eslint": "^8.6.0",
    "prettier": "^2.8.4",
    "typescript": "^4.0.0"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}

Improve Bundle Size

While many of the packages used in this plugin are already installed by Sanity Studio, the standalone bundle size is hovering at around 700kb (including all dependencies). This could be improved with a package bundler like Parcel or Vite.